Named color · #FFCF09
Bright Saffron
Bright Saffron is #FFCF09: rgb(255 207 9), hsl(48 100% 52%), oklch(0.871 0.177 91.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Bright Saffron color name →
#FFCF09
oklch(0.871 0.177 91.6)
Color conversions
- HEX
- #ffcf09
- RGB
- rgb(255 207 9)
- HSL
- hsl(48 100% 52%)
- HWB
- hwb(48 4% 0%)
- OKLCH
- oklch(0.871 0.177 91.6)
- OKLab
- oklab(0.871 -0.005 0.177)
- CIE Lab
- lab(85.5 6.83 84.5)
- LCH
- lch(85.5 84.78 85.4)
- CMYK
- cmyk(0% 19% 96% 0%)
Tints · Shades · Tones
Tints
- FFD445
- FFDA64
- FFDF7C
- FFE491
- FFE9A5
- FFEDB8
- FFF2CA
- FFF6DC
- FFFBEE
Shades
- DEB407
- BE9905
- 9E7F03
- 806702
- 634F01
- 483801
- 2E2300
- 161000
- 030200
Tones
- F2C733
- E4BF46
- D7B854
- CAB05E
- BEA866
- B1A06D
- A49873
- 989078
- 8C887C
Color harmonies
Complementary +180°
- FFCF09
Bright Saffron
- C5D3FF
≈ Pale Phthalo Blue
Analogous -30° +30°
- FFCF09
Bright Saffron
- FFC89A
≈ Peachy Breezes
- C2E650
≈ Energos
Triadic +120° +240°
- FFCF09
Bright Saffron
- 70E8FF
≈ Robin’s Egg
- FFBAF5
≈ Pink Quartz
Split-complementary +150° +210°
- FFCF09
Bright Saffron
- ACDBFF
≈ Droplet
- DDCAFF
≈ Foggy Heath
Tetradic +90° +180° +270°
- FFCF09
Bright Saffron
- 00F5DC
≈ Bright Aqua
- C5D3FF
≈ Pale Phthalo Blue
- FFC1D1
≈ Garden Glory
Contrast & accessibility
Ag
FailOn white
WCAG 1.48:1 · APCA Lc 22
Ag
AAAOn black
WCAG 14.18:1 · APCA Lc 81
Best text color: #000000
WCAG 14.18:1 (AAA) · APCA Lc 81
Contrast pairs
Code snippets
CSS
:root {
--bright-saffron: #ffcf09;
--bright-saffron-rgb: 255 207 9;
--bright-saffron-oklch: oklch(0.871 0.177 91.6);
}
.element {
color: var(--bright-saffron);
background-color: hsl(48 100% 52%);
border-color: oklch(0.871 0.177 91.6);
}Tailwind CSS v4
@theme {
--color-bright-saffron: #ffcf09;
--color-bright-saffron-50: #fff5bc;
--color-bright-saffron-100: #fbe7a4;
--color-bright-saffron-200: #edd378;
--color-bright-saffron-300: #d6b538;
--color-bright-saffron-400: #c59800;
--color-bright-saffron-500: #b17d00;
--color-bright-saffron-600: #956a00;
--color-bright-saffron-700: #785500;
--color-bright-saffron-800: #5a3d00;
--color-bright-saffron-900: #3f2a00;
--color-bright-saffron-950: #281700;
}SCSS
$bright-saffron: #ffcf09;
$bright-saffron-rgb: 255, 207, 9;
$bright-saffron-light: mix(#fff, $bright-saffron, 20%);
$bright-saffron-dark: mix(#000, $bright-saffron, 20%);
.element {
color: $bright-saffron;
box-shadow: 0 0 0 2px rgba($bright-saffron, 0.35);
}