Nazwany kolor · #FCE1B6
Yellow Essence
Yellow Essence to #FCE1B6: rgb(252 225 182), hsl(37 92% 85%), oklch(0.921 0.063 79.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Yellow Essence color name →
#FCE1B6
oklch(0.921 0.063 79.3)
Konwersje koloru
- HEX
- #fce1b6
- RGB
- rgb(252 225 182)
- HSL
- hsl(37 92% 85%)
- HWB
- hwb(37 71% 1%)
- OKLCH
- oklch(0.921 0.063 79.3)
- OKLab
- oklab(0.921 0.012 0.062)
- CIE Lab
- lab(90.99 4.97 24.7)
- LCH
- lch(90.99 25.19 78.6)
- CMYK
- cmyk(0% 11% 28% 1%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FCE4BD
- FDE7C5
- FDEACC
- FDEDD4
- FEF0DB
- FEF3E2
- FEF6E9
- FFF9F1
- FFFCF8
Odcienie ciemniejsze
- DBC49E
- BBA786
- 9C8B6F
- 7E7059
- 625644
- 473E30
- 2D271D
- 16120C
- 030202
Tony
- EFD7B1
- E2CDAB
- D5C3A6
- C9B9A1
- BCAF9B
- B0A696
- A49C90
- 98938B
- 8C8985
Harmonie kolorów
Komplementarna +180°
- FCE1B6
Yellow Essence
- D6E6FF
≈ Veiling Waterfalls
Analogowa -30° +30°
- FCE1B6
Yellow Essence
- FFDDCB
≈ Unbleached Silk
- E7E9B9
≈ Iced Celery
Triada +120° +240°
- FCE1B6
Yellow Essence
- B3F3F5
≈ Ice Citadel
- F7D9FF
≈ Lavender Savour
Komplementarna rozszczepiona +150° +210°
- FCE1B6
Yellow Essence
- C5ECFF
≈ Blue Java Banana
- E4E1FF
≈ Stoic White
Tetrada +90° +180° +270°
- FCE1B6
Yellow Essence
- BCF3DE
≈ Fresh Breeze
- D6E6FF
≈ Veiling Waterfalls
- FFD9EA
≈ Mimi Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.26:1 · APCA Lc 13
Ag
AAANa czerni
WCAG 16.58:1 · APCA Lc 91
Najlepszy kolor tekstu: #000000
WCAG 16.58:1 (AAA) · APCA Lc 91
Contrast pairs
Fragmenty kodu
CSS
:root {
--yellow-essence: #fce1b6;
--yellow-essence-rgb: 252 225 182;
--yellow-essence-oklch: oklch(0.921 0.063 79.3);
}
.element {
color: var(--yellow-essence);
background-color: hsl(37 92% 85%);
border-color: oklch(0.921 0.063 79.3);
}Tailwind CSS v4
@theme {
--color-yellow-essence: #fce1b6;
--color-yellow-essence-50: #fff4e1;
--color-yellow-essence-100: #f3e6d1;
--color-yellow-essence-200: #e2d2b6;
--color-yellow-essence-300: #c8b593;
--color-yellow-essence-400: #b39b74;
--color-yellow-essence-500: #9d8255;
--color-yellow-essence-600: #846e48;
--color-yellow-essence-700: #6a583a;
--color-yellow-essence-800: #4f4029;
--color-yellow-essence-900: #372c1b;
--color-yellow-essence-950: #22190c;
}SCSS
$yellow-essence: #fce1b6;
$yellow-essence-rgb: 252, 225, 182;
$yellow-essence-light: mix(#fff, $yellow-essence, 20%);
$yellow-essence-dark: mix(#000, $yellow-essence, 20%);
.element {
color: $yellow-essence;
box-shadow: 0 0 0 2px rgba($yellow-essence, 0.35);
}