Named color · #FFD69F
Fuzzy Navel
Fuzzy Navel is #FFD69F: rgb(255 214 159), hsl(34 100% 81%), oklch(0.898 0.084 74.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Fuzzy Navel color name →
#FFD69F
oklch(0.898 0.084 74.5)
Color conversions
- HEX
- #ffd69f
- RGB
- rgb(255 214 159)
- HSL
- hsl(34 100% 81%)
- HWB
- hwb(34 62% 0%)
- OKLCH
- oklch(0.898 0.084 74.5)
- OKLab
- oklab(0.898 0.022 0.081)
- CIE Lab
- lab(88.24 9.43 32.84)
- LCH
- lch(88.24 34.17 74)
- CMYK
- cmyk(0% 16% 38% 0%)
Tints · Shades · Tones
Tints
- FFDAA9
- FFDEB3
- FFE3BD
- FFE7C6
- FFEBD0
- FFEFD9
- FFF3E3
- FFF7EC
- FFFBF6
Shades
- DEBA8A
- BE9E75
- 9E8461
- 806A4D
- 63523B
- 483B29
- 2E2518
- 161009
- 030201
Tones
- F2CD9C
- E5C49A
- D8BC97
- CBB394
- BEAA91
- B1A28E
- A5998A
- 989187
- 8C8884
Color harmonies
Complementary +180°
- FFD69F
Fuzzy Navel
- C7E0FF
≈ Arc Light
Analogous -30° +30°
- FFD69F
Fuzzy Navel
- FFD2BF
≈ Simply Delicious
- E6E1A0
≈ Marsh Mist
Triadic +120° +240°
- FFD69F
Fuzzy Navel
- 98F0EE
≈ Freezy Breezy
- EFD0FF
≈ Rose Dragée
Split-complementary +150° +210°
- FFD69F
Fuzzy Navel
- AEE8FF
≈ Fresh Air
- D9DAFF
≈ Transparent Blue
Tetradic +90° +180° +270°
- FFD69F
Fuzzy Navel
- A9F0CF
≈ Magic Mint
- C7E0FF
≈ Arc Light
- FFCCE8
≈ Classic Rose
Contrast & accessibility
Ag
FailOn white
WCAG 1.36:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.37:1 · APCA Lc 86
Best text color: #000000
WCAG 15.37:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--fuzzy-navel: #ffd69f;
--fuzzy-navel-rgb: 255 214 159;
--fuzzy-navel-oklch: oklch(0.898 0.084 74.5);
}
.element {
color: var(--fuzzy-navel);
background-color: hsl(34 100% 81%);
border-color: oklch(0.898 0.084 74.5);
}Tailwind CSS v4
@theme {
--color-fuzzy-navel: #ffd69f;
--color-fuzzy-navel-50: #fff3db;
--color-fuzzy-navel-100: #f8e5c9;
--color-fuzzy-navel-200: #e9d0ad;
--color-fuzzy-navel-300: #d0b287;
--color-fuzzy-navel-400: #bc9765;
--color-fuzzy-navel-500: #a77e42;
--color-fuzzy-navel-600: #8d6a39;
--color-fuzzy-navel-700: #71552d;
--color-fuzzy-navel-800: #543e20;
--color-fuzzy-navel-900: #3b2a15;
--color-fuzzy-navel-950: #251806;
}SCSS
$fuzzy-navel: #ffd69f;
$fuzzy-navel-rgb: 255, 214, 159;
$fuzzy-navel-light: mix(#fff, $fuzzy-navel, 20%);
$fuzzy-navel-dark: mix(#000, $fuzzy-navel, 20%);
.element {
color: $fuzzy-navel;
box-shadow: 0 0 0 2px rgba($fuzzy-navel, 0.35);
}