이름 색상 · #FCE79A
Twinkle Little Star
Twinkle Little Star은(는) #FCE79A: rgb(252 231 154), hsl(47 94% 80%), oklch(0.928 0.099 94.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Yellow mean? → · Twinkle Little Star color name →
#FCE79A
oklch(0.928 0.099 94.7)
색상 변환
- 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%)
틴트 · 셰이드 · 톤
틴트
- FCEAA5
- FDECB0
- FDEFBA
- FDF1C4
- FDF3CE
- FEF6D8
- FEF8E2
- FEFAEC
- FFFDF5
셰이드
- DBC985
- BBAB71
- 9C8F5E
- 7E734B
- 625939
- 474027
- 2D2817
- 161309
- 030301
톤
- EFDC98
- E2D296
- D5C794
- C9BD92
- BCB28F
- B0A88C
- A49E8A
- 979487
- 8C8A83
색 조화
보색 +180°
- FCE79A
Twinkle Little Star
- E0E6FF
≈ Lavender Mist
유사색 -30° +30°
- FCE79A
Twinkle Little Star
- FFE1C6
≈ Wild Maple
- D8F3AA
≈ Mint Julep
삼각 배색 +120° +240°
- FCE79A
Twinkle Little Star
- BCF2FF
≈ Northrend
- FFDAF6
≈ Strawberry Frost
분열 보색 +150° +210°
- FCE79A
Twinkle Little Star
- D3EBFF
≈ Veiling Waterfalls
- EDE1FF
≈ Lavender Savour
사각 배색 +90° +180° +270°
- FCE79A
Twinkle Little Star
- 96FDEF
≈ Hello Winter
- E0E6FF
≈ Lavender Mist
- FFDDE4
≈ Fresh Piglet
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.23:1 · APCA Lc 11
Ag
AAA검은색 위
WCAG 17.03:1 · APCA Lc 93
가장 좋은 글자색: #000000
WCAG 17.03:1 (AAA) · APCA Lc 93
Contrast pairs
코드 스니펫
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);
}