Skip to main content

Black

Black

Everything you need to know about black to inspire your next design.

Pick a palette type

What color is black?

Black, with Hex code #000000, is the purest and most absolute form of black, representing the complete absence of light and color. Often associated with formality and mystery, black is a powerful and versatile color in design, uniquely effective for creating depth, contrast, and emphasis.

blackblack

What does black look like on digital screens?

Black is defined by the following color codes and values to ensure consistency across various digital platforms and devices.

- HEX code: #000000

- RGB value: 0% red, 0% green and 0% blue

Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.

How should I effectively use black in UI design?

Black can improve the aesthetics and functionality of UI design. Here are some effective ways to incorporate it:

  • Emphasize minimalism. Black backgrounds or elements can accentuate a minimalist design, making content pop while keeping the interface sleek and professional. This approach works exceptionally well in "dark mode" designs, reducing eye strain in low-light conditions and extending battery life on OLED screens.
  • Support accessibility. Always confirm your use of black supports accessibility standards. Adequate contrast with other colors, especially for text, is essential for users with visual impairments.
  • Balance with color. While black can dominate, it is also a grounding color when balanced with brighter colors for vibrancy or softer shades for a subdued aesthetic. Use black as a foundation to make other colors in your palette pop.
  • Convey elegance and sophistication. Black is synonymous with luxury and sophistication. Use it in UI elements like headers, footers, or typographic accents to add a touch of elegance to your designs.

Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.

What are similar colors to black?

For variations within the same deep and enigmatic spectrum as black, consider:

  • Charcoal gray (#4A4A4A) offers a slightly lighter shade that retains the strength and mystery of black, providing a softer alternative for versatility.
  • Onyx (#353839) mirrors the deep, dark essence of black with a hint of a blue undertone, giving a slightly dimensional feel to the solid black.
  • Gunmetal (#353E43) presents a metallic edge, blending the depth of black with a shimmer of gray for added texture and visual interest.
  • Ebony (#5D6658) introduces a subtle green undertone, creating a rich, dark hue that echoes black’s natural depth and complexity.

What colors go with black?

To complement black's definitive tones, consider pairing it with:

  • White (#FFFFFF) for a classic, timeless contrast that sharpens and elevates the depth of black.
  • Silver (#C4C4C4) adds a futuristic, sleek touch, illuminating the sophisticated base that black provides.
  • Gold (#EFBF04) introduces a luxurious, opulent contrast, making black's depth a backdrop for warmth and splendor.
  • Royal blue (#305CDE) brings a vibrant splash of color, offering a regal and dynamic contrast to the starkness of black.
  • Burgundy (#660033) melds warmth and depth, creating a refined and luxurious palette harmonizing beautifully with black.

Other colors worth considering include olive green for an earthy, subdued mix; coral for a bright, energetic contrast, and soft pink for a delicate, feminine touch.

What colors conflict with black?

While black is exceptionally versatile, certain combinations may prove less harmonious:

  • Neon brights (e.g., #FF00FF) can offer too stark a contrast, potentially clashing with black's inherent sophistication by creating an overly vibrant palette.
  • Dark browns (#654321), when used in excess, may muddy the clarity and sharpness of black, leading to a visually heavy and less distinct combination.
  • Deep purples (#4B0082), without careful pairing, might compete with black's dominance, risking a palette that feels overly somber or monotonous.
  • Dark greens (#006400) in saturated tones can blend too closely with black, diminishing the potential for a dynamic or visually engaging palette.
  • Very dark blues (#00008B), similar to dark greens, may not provide enough contrast or variation, resulting in a blend that lacks distinction.

What does black symbolize?

Black can stand for power, elegance, and formality—think of a black-tie event or the iconic Little Black Dress, the epitome of sophistication and style. Even in color psychology, black is seen as a color of strength, authority, and depth.

But that’s not the whole story: In many cultures, black is associated with mourning and solemnity, representing loss and the finite nature of life. Black’s ability to absorb all light makes it a symbol of the unknown, mystery, and the infinite, evoking a contemplative mood and a sense of potential and possibility.

Black's ability to create contrast, focus, and visual rest speaks to its power in UX/UI design. Its application in digital interfaces, from stylish minimalist design to the practicality of dark mode settings, demonstrates its versatility. Designers may use it to convey a sense of reliability and sophistication, especially for luxury products and high-end services.

What’s the history of black?

From ancient cave paintings to mythology, black has represented the dualities of life and death throughout history. During the 14th century, black became associated with power and rebellion in European fashion. The Victorian era embraced it for mourning attire. During the Industrial Revolution, black was the color of soot and smoke from machinery, symbolizing progress and technological advancement.

In the 20th century, the Little Black Dress designed by Chanel immortalized black's elegance and simplicity, democratizing fashion with its style and sophistication. Today, materials such as Vantablack have pushed the boundaries of black's perception, marrying science with art to explore new worlds.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Analogous

Monochromatic

Split

Triadic

Square

Custom palettes

Black Abyss

Gothic Noir

Graphite

Accessibility

Contrast checker

Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.
This is #000000 text on a #FFFFFF background.

21:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1
Pass
AAA
7:1

Large Text

Pass
AA
3:1
Pass
AAA
4.5:1
Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.
This is #000000 text on a #000000 background.

1:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1
Fail
AAA
7:1

Large Text

Fail
AA
3:1
Fail
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #000000, known as black, has RGB values of R:0, G:0, B:0 and CMYK values of C:0, M:0, Y:0, K:1.

VALUECSS
HEX000000#000000
RGB DECIMAL0, 0, 0rgb(0, 0, 0)
RGB PERCENTAGE0, 0, 0rgb(0%, 0%, 0%)
CMYK0, 0, 0, 100
HSL0°, 0, 0hsl(0,0%,0%)
HSV (OR HSB)0°, 0, 0
WEB SAFE000000#000000
CIE-LAB0, 0, 0
XYZ0, 0, 0
xyY0, 0, 0
CIE-LCH0, 0, 360
CIE-LUV0, 0, 0
HUNTER-LAB0, 0, 0
BINARY00000000, 00000000, 00000000
iOS - SwiftUIColor(red: 0, green: 0, blue: 0)
iOS - UIKitUIColor(red: 0, green: 0, blue: 0, alpha: 1.0)
Android - ComposeColor(0xFF000000)

Keep learning

color wheelcolor wheel

Figma color wheel

Want to find the perfect complementary or analogous colors to match black?

Learn more

Midnight blueMidnight blue

Midnight blue

Learn more about midnight blue.

Learn more

blue greyblue grey

Blue-Gray

Discover the cool and muted color of blue-gray.

Learn more