이름 색상 · #FFC400
Citrus Splash
Citrus Splash은(는) #FFC400: rgb(255 196 0), hsl(46 100% 50%), oklch(0.85 0.174 86.6). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Yellow mean? → · Citrus Splash color name →
#FFC400
oklch(0.85 0.174 86.6)
색상 변환
- HEX
- #ffc400
- RGB
- rgb(255 196 0)
- HSL
- hsl(46 100% 50%)
- HWB
- hwb(46 0% 0%)
- OKLCH
- oklch(0.85 0.174 86.6)
- OKLab
- oklab(0.85 0.01 0.174)
- CIE Lab
- lab(82.82 12.16 83.55)
- LCH
- lch(82.82 84.43 81.7)
- CMYK
- cmyk(0% 23% 100% 0%)
틴트 · 셰이드 · 톤
틴트
- FFCA42
- FFD161
- FFD779
- FFDD8F
- FFE3A3
- FFE9B6
- FFEFC9
- FFF4DB
- FFFAED
셰이드
- DEAA00
- BE9100
- 9E7800
- 806100
- 634A00
- 483500
- 2E2100
- 160E00
- 030200
톤
- F2BD30
- E5B744
- D8B051
- CBA95C
- BEA365
- B19C6C
- A59572
- 988E77
- 8C877C
색 조화
보색 +180°
- FFC400
Citrus Splash
- B8CDFF
≈ Ice Cold Stare
유사색 -30° +30°
- FFC400
Citrus Splash
- FFBE8F
≈ Orange Mousse
- C7DB3F
≈ Las Palmas
삼각 배색 +120° +240°
- FFC400
Citrus Splash
- 00E8FD
≈ Whimsical Blue
- FFACFF
≈ Jigglypuff
분열 보색 +150° +210°
- FFC400
Citrus Splash
- 97D7FF
≈ Shiva Blue
- D3C3FF
≈ Innocent Snowdrop
사각 배색 +90° +180° +270°
- FFC400
Citrus Splash
- 00EFCB
≈ Fake Jade
- B8CDFF
≈ Ice Cold Stare
- FFB5CF
≈ Baby Pink
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.59:1 · APCA Lc 27
Ag
AAA검은색 위
WCAG 13.14:1 · APCA Lc 76
가장 좋은 글자색: #000000
WCAG 13.14:1 (AAA) · APCA Lc 76
Contrast pairs
코드 스니펫
CSS
:root {
--citrus-splash: #ffc400;
--citrus-splash-rgb: 255 196 0;
--citrus-splash-oklch: oklch(0.85 0.174 86.6);
}
.element {
color: var(--citrus-splash);
background-color: hsl(46 100% 50%);
border-color: oklch(0.85 0.174 86.6);
}Tailwind CSS v4
@theme {
--color-citrus-splash: #ffc400;
--color-citrus-splash-50: #fff3bc;
--color-citrus-splash-100: #ffe6a5;
--color-citrus-splash-200: #f3d07a;
--color-citrus-splash-300: #dcb23c;
--color-citrus-splash-400: #cb9500;
--color-citrus-splash-500: #b87900;
--color-citrus-splash-600: #9b6700;
--color-citrus-splash-700: #7c5200;
--color-citrus-splash-800: #5e3b00;
--color-citrus-splash-900: #422800;
--color-citrus-splash-950: #2a1600;
}SCSS
$citrus-splash: #ffc400;
$citrus-splash-rgb: 255, 196, 0;
$citrus-splash-light: mix(#fff, $citrus-splash, 20%);
$citrus-splash-dark: mix(#000, $citrus-splash, 20%);
.element {
color: $citrus-splash;
box-shadow: 0 0 0 2px rgba($citrus-splash, 0.35);
}