Named color · #FFF4A1
Candle Flame
Candle Flame is #FFF4A1: rgb(255 244 161), hsl(53 100% 82%), oklch(0.957 0.104 101.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Candle Flame color name →
#FFF4A1
oklch(0.957 0.104 101.6)
Color conversions
- HEX
- #fff4a1
- RGB
- rgb(255 244 161)
- HSL
- hsl(53 100% 82%)
- HWB
- hwb(53 63% 0%)
- OKLCH
- oklch(0.957 0.104 101.6)
- OKLab
- oklab(0.957 -0.021 0.102)
- CIE Lab
- lab(95.69 -4.76 41.41)
- LCH
- lch(95.69 41.68 96.6)
- CMYK
- cmyk(0% 4% 37% 0%)
Tints · Shades · Tones
Tints
- FFF5AB
- FFF7B5
- FFF8BF
- FFF9C9
- FFFAD2
- FFFBDB
- FFFCE4
- FFFDED
- FFFEF6
Shades
- DED48B
- BEB576
- 9E9762
- 807A4E
- 635E3C
- 48442A
- 2E2B19
- 161409
- 030301
Tones
- F2E89E
- E4DC9C
- D7D099
- CAC496
- BDB993
- B1AD8F
- A4A28C
- 989688
- 8C8B84
Color harmonies
Complementary +180°
- FFF4A1
Candle Flame
- EEF0FF
≈ Carte Blanche
Analogous -30° +30°
- FFF4A1
Candle Flame
- FFEEDA
≈ Sand Crystal
- DAFFBC
≈ Greedy Green
Triadic +120° +240°
- FFF4A1
Candle Flame
- DDF6FF
≈ Glacial Day
- FFEAF6
≈ Fairy Dust
Split-complementary +150° +210°
- FFF4A1
Candle Flame
- E7F2FF
≈ Cotton Boll
- F7ECFF
≈ Placebo Fuchsia
Tetradic +90° +180° +270°
- FFF4A1
Candle Flame
- C1FFFB
≈ Crushed Ice
- EEF0FF
≈ Carte Blanche
- FFEBED
≈ Just Pink Enough
Contrast & accessibility
Ag
FailOn white
WCAG 1.12:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.70:1 · APCA Lc 99
Best text color: #000000
WCAG 18.70:1 (AAA) · APCA Lc 99
Contrast pairs
Code snippets
CSS
:root {
--candle-flame: #fff4a1;
--candle-flame-rgb: 255 244 161;
--candle-flame-oklch: oklch(0.957 0.104 101.6);
}
.element {
color: var(--candle-flame);
background-color: hsl(53 100% 82%);
border-color: oklch(0.957 0.104 101.6);
}Tailwind CSS v4
@theme {
--color-candle-flame: #fff4a1;
--color-candle-flame-50: #faf7d5;
--color-candle-flame-100: #edeac3;
--color-candle-flame-200: #dbd7a4;
--color-candle-flame-300: #c0ba7b;
--color-candle-flame-400: #aba154;
--color-candle-flame-500: #958828;
--color-candle-flame-600: #7e7324;
--color-candle-flame-700: #655c1d;
--color-candle-flame-800: #4b4312;
--color-candle-flame-900: #342e0b;
--color-candle-flame-950: #201b01;
}SCSS
$candle-flame: #fff4a1;
$candle-flame-rgb: 255, 244, 161;
$candle-flame-light: mix(#fff, $candle-flame, 20%);
$candle-flame-dark: mix(#000, $candle-flame, 20%);
.element {
color: $candle-flame;
box-shadow: 0 0 0 2px rgba($candle-flame, 0.35);
}