이름 색상 · #F08674
Coralette
Coralette은(는) #F08674: rgb(240 134 116), hsl(9 81% 70%), oklch(0.732 0.133 30.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Red mean? → · Coralette color name →
#F08674
oklch(0.732 0.133 30.7)
색상 변환
- HEX
- #f08674
- RGB
- rgb(240 134 116)
- HSL
- hsl(9 81% 70%)
- HWB
- hwb(9 45% 6%)
- OKLCH
- oklch(0.732 0.133 30.7)
- OKLab
- oklab(0.732 0.115 0.068)
- CIE Lab
- lab(67.68 40.15 28.51)
- LCH
- lch(67.68 49.24 35.4)
- CMYK
- cmyk(0% 44% 52% 6%)
틴트 · 셰이드 · 톤
틴트
- F39382
- F69F8F
- F8AB9D
- FAB7AB
- FCC3B9
- FDCFC7
- FEDBD5
- FFE7E3
- FFF3F1
셰이드
- D17464
- B26254
- 955145
- 784037
- 5D3029
- 43211B
- 2A130F
- 140605
- 030101
톤
- E58676
- DA8677
- CF8679
- C4867A
- B9857B
- AE847C
- A3837D
- 98827E
- 8C817F
색 조화
보색 +180°
- F08674
Coralette
- 00BDD5
≈ Holiday Blue
유사색 -30° +30°
- F08674
Coralette
- EB82A4
≈ Aurora Pink
- E49348
≈ Yellow Sumac
삼각 배색 +120° +240°
- F08674
Coralette
- 62C07C
≈ Verdigris Coloured
- 89A2FC
≈ Periwinkle Blue
분열 보색 +150° +210°
- F08674
Coralette
- 00C3AC
≈ Turquoise
- 4DB2F3
≈ Blue Jeans
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.50:1 · APCA Lc 49
Ag
AAA검은색 위
WCAG 8.36:1 · APCA Lc 53
가장 좋은 글자색: #000000
WCAG 8.36:1 (AAA) · APCA Lc 53
Contrast pairs
코드 스니펫
CSS
:root {
--coralette: #f08674;
--coralette-rgb: 240 134 116;
--coralette-oklch: oklch(0.732 0.133 30.7);
}
.element {
color: var(--coralette);
background-color: hsl(9 81% 70%);
border-color: oklch(0.732 0.133 30.7);
}Tailwind CSS v4
@theme {
--color-coralette: #f08674;
--color-coralette-50: #ffe8dd;
--color-coralette-100: #ffd9cc;
--color-coralette-200: #ffc0b0;
--color-coralette-300: #f49e8b;
--color-coralette-400: #e27e6d;
--color-coralette-500: #cf5f4d;
--color-coralette-600: #af5142;
--color-coralette-700: #8d4034;
--color-coralette-800: #692e27;
--color-coralette-900: #4a1f1a;
--color-coralette-950: #300e0a;
}SCSS
$coralette: #f08674;
$coralette-rgb: 240, 134, 116;
$coralette-light: mix(#fff, $coralette, 20%);
$coralette-dark: mix(#000, $coralette, 20%);
.element {
color: $coralette;
box-shadow: 0 0 0 2px rgba($coralette, 0.35);
}