Building a Professional Dark UI with This Palette
Carbon Teal is built for interfaces where content density and clarity matter more than visual flair. The nearly neutral gray backgrounds keep the interface from feeling themed or branded, making it versatile enough for productivity tools, project management dashboards, and developer platforms. Start with Carbon Black (#191A1F) as your root background and Dark Surface (#2C2D35) for cards and content panels. The Elevated shade (#3D3E47) provides clear separation for overlay elements. Use Light Gray (#E8E8EC) for all primary text, including headings, body copy, and navigation labels. Silver Text (#B4B4BC) works for secondary descriptions and metadata. The Teal Accent is your primary interactive color: use it for links, active navigation indicators, toggle switches, progress bars, and primary buttons. Reserve Coral Warning exclusively for error and destructive states to maintain its visual urgency. This disciplined use of color creates a clean interface where accent colors carry strong semantic meaning.
Why These Specific Colors?
Carbon Teal's background shades all sit at 230-234 degrees with very low saturation (8-11%), making them appear nearly neutral gray while retaining just enough cool violet undertone to prevent the dead, screen-door appearance of truly achromatic dark grays. The saturation stays consistent across the three background levels, so depth changes feel smooth and natural. The text colors maintain the same hue angle at 240 degrees, ensuring perfect tonal harmony with the backgrounds. Teal at 171 degrees was chosen as the primary accent because it sits roughly opposite the background hue on the color wheel, creating natural visual contrast without the aggressive intensity of a true complementary pairing. At 100% saturation and 41% lightness, the teal is vivid enough to command attention on the muted backgrounds. Coral at 0 degrees with 71% lightness provides a warm counterpoint that is universally recognized as a warning or error signal.
Accessibility Notes
Carbon Teal delivers strong accessibility performance across its key pairings. Light Gray text achieves 14.22:1 on Carbon Black and 11.2:1 on Dark Surface, both well above AAA thresholds. The Teal Accent is notably accessible at 8.9:1 on Carbon Black and 7.02:1 on Dark Surface, meaning teal links and labels meet AAA compliance at any text size. Silver Text at 8.43:1 on Carbon Black also passes AAA, giving you a reliable secondary text option. Coral Warning at 6.26:1 on Carbon Black passes AA but not AAA, so use it at 18px or larger for text elements, or pair it with an icon for smaller sizes. On Dark Surface, coral drops to 4.93:1, which still passes AA for normal text but is worth monitoring. Muted Gray (#7C7C8A) at 4.22:1 on Carbon Black narrowly misses AA for normal text, so restrict it to large text (18px+), icons, or decorative borders where contrast requirements are lower.
SaaS Dashboard Implementation
For SaaS dashboard interfaces, Carbon Teal provides an ideal foundation. Use the three background layers to establish a clear information hierarchy: Carbon Black for the outer shell and navigation, Dark Surface for the main content area and metric cards, and Elevated for interactive controls and filter panels. Teal works exceptionally well for KPI indicators, progress tracking, and positive trend arrows, while coral handles alerts and declining metrics. For data tables, alternate between Carbon Black and Dark Surface for row striping, using Light Gray for primary data values and Silver Text for supporting columns. Chart visualizations can use teal as the primary series color and coral for comparison or threshold lines. Consider using teal at reduced opacity (30-40%) for chart backgrounds and area fills, allowing the full-saturation teal to remain impactful for data points and labels.