back to palettes
Color lane

Transformative teal + Interface iris

A 2026 digital-product system led by grounded teal, ink-cool neutrals, and small high-clarity semantic signals.

Signature · the star
primary accentTransformative teal · #007a82
Interface iris · #4f5ec4
Signal apricot · #c77445
Neutrals · the ground
bg
#f5f8f7
surface
#ffffff
text
#102123
muted
#5e6e70
border
#cddadb
Semantic · functional accessory
success
warning
error
info
Ramps
accent
neutral
Download .css
Do
  • · Use neutral.50/bg and white surface for most product real estate; let teal appear in focused controls, active navigation, and one primary action.
  • · Pair text #102123 on surface #ffffff and bg #f5f8f7 for AA/APCA-friendly body copy.
  • · Use accent.500 with accent.50 or white label only for large/action UI; use accent.700 when small teal text sits on light surfaces.
  • · Use semantic colors as state roles, not as brand identity; combine color with icon/label for status.
  • · For charts, use teal first, then iris/apricot/semantic hues with gridlines in border and labels in muted.
Don't
  • · Do not use muted as body text on bg or tinted accent.50 fields.
  • · Do not place small white text on accent.300/400, apricot.300/400, or warning.300/400.
  • · Do not flood dashboards with teal fills; keep the primary accent scarce so status and focus remain legible.
  • · Do not rely on hue alone for error/success/warning states.
try it

remix with this palette

Drop Transformative teal + Interface iris onto any UI language and swap the art style — the preview recolors live.

UI language
Palette · fixed
Transformative teal + Interface iris
Art style
Landing Page
no composition
live preview · recolored + filled