Named color · #FFDB00
Sizzling Sunrise
Sizzling Sunrise is #FFDB00: rgb(255 219 0), hsl(52 100% 50%), oklch(0.895 0.184 97). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Sizzling Sunrise color name →
#FFDB00
oklch(0.895 0.184 97)
Color conversions
- HEX
- #ffdb00
- RGB
- rgb(255 219 0)
- HSL
- hsl(52 100% 50%)
- HWB
- hwb(52 0% 0%)
- OKLCH
- oklch(0.895 0.184 97)
- OKLab
- oklab(0.895 -0.023 0.183)
- CIE Lab
- lab(88.46 0.99 87.21)
- LCH
- lch(88.46 87.21 89.3)
- CMYK
- cmyk(0% 14% 100% 0%)
Tints · Shades · Tones
Tints
- FFDF46
- FFE365
- FFE77D
- FFEB93
- FFEFA6
- FFF2B9
- FFF6CB
- FFF9DD
- FFFCEE
Shades
- DEBE00
- BEA200
- 9E8700
- 806D00
- 635400
- 483C00
- 2E2600
- 161100
- 030200
Tones
- F2D233
- E4C947
- D7C055
- CAB75F
- BDAE68
- B1A56E
- A49B74
- 989279
- 8C897D
Color harmonies
Complementary +180°
- FFDB00
Sizzling Sunrise
- D3DAFF
≈ Icy Plains
Analogous -30° +30°
- FFDB00
Sizzling Sunrise
- FFD3A7
≈ Neon Cloud
- BBF25E
≈ Green Cow
Triadic +120° +240°
- FFDB00
Sizzling Sunrise
- 9EEAFF
≈ Fresh Air
- FFC9EF
≈ Rosy Maple Moth
Split-complementary +150° +210°
- FFDB00
Sizzling Sunrise
- C0E0FF
≈ Dithered Sky
- E8D2FF
≈ Rose Dragée
Tetradic +90° +180° +270°
- FFDB00
Sizzling Sunrise
- 00FDEE
≈ Turquoise Blue
- D3DAFF
≈ Icy Plains
- FFCDD6
≈ Bologna Sausage
Contrast & accessibility
Ag
FailOn white
WCAG 1.36:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.38:1 · APCA Lc 86
Best text color: #000000
WCAG 15.38:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--sizzling-sunrise: #ffdb00;
--sizzling-sunrise-rgb: 255 219 0;
--sizzling-sunrise-oklch: oklch(0.895 0.184 97);
}
.element {
color: var(--sizzling-sunrise);
background-color: hsl(52 100% 50%);
border-color: oklch(0.895 0.184 97);
}Tailwind CSS v4
@theme {
--color-sizzling-sunrise: #ffdb00;
--color-sizzling-sunrise-50: #fff7ba;
--color-sizzling-sunrise-100: #f7eaa1;
--color-sizzling-sunrise-200: #e8d675;
--color-sizzling-sunrise-300: #cfb831;
--color-sizzling-sunrise-400: #be9c00;
--color-sizzling-sunrise-500: #aa8100;
--color-sizzling-sunrise-600: #8f6e00;
--color-sizzling-sunrise-700: #735800;
--color-sizzling-sunrise-800: #573f00;
--color-sizzling-sunrise-900: #3c2b00;
--color-sizzling-sunrise-950: #261800;
}SCSS
$sizzling-sunrise: #ffdb00;
$sizzling-sunrise-rgb: 255, 219, 0;
$sizzling-sunrise-light: mix(#fff, $sizzling-sunrise, 20%);
$sizzling-sunrise-dark: mix(#000, $sizzling-sunrise, 20%);
.element {
color: $sizzling-sunrise;
box-shadow: 0 0 0 2px rgba($sizzling-sunrise, 0.35);
}