Saffron sits in the bright yellow family, with the hex code #F4C430 mapping to rgb(244, 196, 48) in RGB and hsl(45.3, 89.9%, 57.3%) in HSL. In OKLCH it carries 84% perceptual lightness and 0.160 chroma — a highly saturated, light reading that behaves well as a background, surface or supporting tone in modern interfaces. Yellow is the most luminous hue the eye can perceive, which is why it dominates road signs, highlighters and warning labels. In branding it reads as cheerful and clarifying, but it must be earned — every percentage of saturation amplifies attention.
Yellow is the most luminous hue the eye can perceive, which is why it dominates road signs, highlighters and warning labels. In branding it reads as cheerful and clarifying, but it must be earned — every percentage of saturation amplifies attention.
Yellow text fails contrast on white almost universally. Use it as a background with dark text, or strictly for non-essential decoration. Mind colour-blind users — protan/deutan vision conflates yellow with green.
#F4C430rgb(244, 196, 48)hsl(45.3, 89.9%, 57.3%)hsv(45.3, 80.3%, 95.7%)lch(81.77% 74.42 83.76)oklch(83.99% 0.1598 89.19)lab(81.77% 8.09 73.98):root {
--color: #f4c430;
--color-rgb: rgb(244, 196, 48);
--color-hsl: hsl(45.3, 89.9%, 57.3%);
--color-oklch: oklch(83.99% 0.1598 89.19);
}How saffron performs as foreground text on common surfaces, scored with WCAG 2.1.
Tints are produced by mixing saffron with progressively more white.
Shades are produced by mixing saffron with progressively more black.
Tones are produced by mixing saffron with progressively more gray, lowering chroma while keeping lightness.