Nazwany kolor · #FCE79A
Twinkle Little Star
Twinkle Little Star to #FCE79A: rgb(252 231 154), hsl(47 94% 80%), oklch(0.928 0.099 94.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Yellow mean? → · Twinkle Little Star color name →
#FCE79A
oklch(0.928 0.099 94.7)
Konwersje koloru
- HEX
- #fce79a
- RGB
- rgb(252 231 154)
- HSL
- hsl(47 94% 80%)
- HWB
- hwb(47 60% 1%)
- OKLCH
- oklch(0.928 0.099 94.7)
- OKLab
- oklab(0.928 -0.008 0.099)
- CIE Lab
- lab(92.09 -0.33 40.22)
- LCH
- lch(92.09 40.22 90.5)
- CMYK
- cmyk(0% 8% 39% 1%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FCEAA5
- FDECB0
- FDEFBA
- FDF1C4
- FDF3CE
- FEF6D8
- FEF8E2
- FEFAEC
- FFFDF5
Odcienie ciemniejsze
- DBC985
- BBAB71
- 9C8F5E
- 7E734B
- 625939
- 474027
- 2D2817
- 161309
- 030301
Tony
- EFDC98
- E2D296
- D5C794
- C9BD92
- BCB28F
- B0A88C
- A49E8A
- 979487
- 8C8A83
Harmonie kolorów
Komplementarna +180°
- FCE79A
Twinkle Little Star
- E0E6FF
≈ Lavender Mist
Analogowa -30° +30°
- FCE79A
Twinkle Little Star
- FFE1C6
≈ Wild Maple
- D8F3AA
≈ Mint Julep
Triada +120° +240°
- FCE79A
Twinkle Little Star
- BCF2FF
≈ Northrend
- FFDAF6
≈ Strawberry Frost
Komplementarna rozszczepiona +150° +210°
- FCE79A
Twinkle Little Star
- D3EBFF
≈ Veiling Waterfalls
- EDE1FF
≈ Lavender Savour
Tetrada +90° +180° +270°
- FCE79A
Twinkle Little Star
- 96FDEF
≈ Hello Winter
- E0E6FF
≈ Lavender Mist
- FFDDE4
≈ Fresh Piglet
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.23:1 · APCA Lc 11
Ag
AAANa czerni
WCAG 17.03:1 · APCA Lc 93
Najlepszy kolor tekstu: #000000
WCAG 17.03:1 (AAA) · APCA Lc 93
Contrast pairs
Fragmenty kodu
CSS
:root {
--twinkle-little-star: #fce79a;
--twinkle-little-star-rgb: 252 231 154;
--twinkle-little-star-oklch: oklch(0.928 0.099 94.7);
}
.element {
color: var(--twinkle-little-star);
background-color: hsl(47 94% 80%);
border-color: oklch(0.928 0.099 94.7);
}Tailwind CSS v4
@theme {
--color-twinkle-little-star: #fce79a;
--color-twinkle-little-star-50: #fdf6d6;
--color-twinkle-little-star-100: #f1e9c3;
--color-twinkle-little-star-200: #e0d5a5;
--color-twinkle-little-star-300: #c6b87d;
--color-twinkle-little-star-400: #b19e57;
--color-twinkle-little-star-500: #9b852d;
--color-twinkle-little-star-600: #837028;
--color-twinkle-little-star-700: #695a20;
--color-twinkle-little-star-800: #4e4114;
--color-twinkle-little-star-900: #362d0d;
--color-twinkle-little-star-950: #211a02;
}SCSS
$twinkle-little-star: #fce79a;
$twinkle-little-star-rgb: 252, 231, 154;
$twinkle-little-star-light: mix(#fff, $twinkle-little-star, 20%);
$twinkle-little-star-dark: mix(#000, $twinkle-little-star, 20%);
.element {
color: $twinkle-little-star;
box-shadow: 0 0 0 2px rgba($twinkle-little-star, 0.35);
}