이름 색상 · #CC2222
Lionheart
Lionheart은(는) #CC2222: rgb(204 34 34), hsl(0 71% 47%), oklch(0.545 0.204 27.4). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Red mean? → · Lionheart color name →
#CC2222
oklch(0.545 0.204 27.4)
색상 변환
- HEX
- #cc2222
- RGB
- rgb(204 34 34)
- HSL
- hsl(0 71% 47%)
- HWB
- hwb(0 13% 20%)
- OKLCH
- oklch(0.545 0.204 27.4)
- OKLab
- oklab(0.545 0.181 0.094)
- CIE Lab
- lab(45.19 64.06 46.31)
- LCH
- lch(45.19 79.05 35.9)
- CMYK
- cmyk(0% 83% 83% 20%)
틴트 · 셰이드 · 톤
틴트
- D4433B
- DC5C51
- E37267
- E9877C
- EF9C91
- F4B0A7
- F8C4BC
- FBD7D2
- FEEBE9
셰이드
- B11C1C
- 971616
- 7E1111
- 650B0B
- 4E0707
- 370303
- 220101
- 0F0000
- 020000
톤
- C6352F
- C0423A
- BA4D44
- B3574E
- AC5F56
- A5675F
- 9D6E68
- 947470
- 8A7A78
색 조화
보색 +180°
- CC2222
Lionheart
- 007F8C
≈ Metallic Seaweed
유사색 -30° +30°
- CC2222
Lionheart
- C32071
≈ Treasured Love
- A75800
≈ Windsor Brown
삼각 배색 +120° +240°
- CC2222
Lionheart
- 008831
≈ Broccoli Paradise
- 3D61E4
≈ Bluetiful
분열 보색 +150° +210°
- CC2222
Lionheart
- 00836F
≈ Viridis
- 0079AD
≈ Sixties Blue
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
AA흰색 위
WCAG 5.49:1 · APCA Lc 76
Ag
Fail검은색 위
WCAG 3.81:1 · APCA Lc 26
가장 좋은 글자색: #FFFFFF
WCAG 5.49:1 (AA) · APCA Lc 76
Contrast pairs
코드 스니펫
CSS
:root {
--lionheart: #cc2222;
--lionheart-rgb: 204 34 34;
--lionheart-oklch: oklch(0.545 0.204 27.4);
}
.element {
color: var(--lionheart);
background-color: hsl(0 71% 47%);
border-color: oklch(0.545 0.204 27.4);
}Tailwind CSS v4
@theme {
--color-lionheart: #cc2222;
--color-lionheart-50: #ffe0d4;
--color-lionheart-100: #ffcfc0;
--color-lionheart-200: #ffb2a1;
--color-lionheart-300: #ff8b78;
--color-lionheart-400: #ff6357;
--color-lionheart-500: #ef322f;
--color-lionheart-600: #ca2d2a;
--color-lionheart-700: #a32521;
--color-lionheart-800: #7a181a;
--color-lionheart-900: #561011;
--color-lionheart-950: #390104;
}SCSS
$lionheart: #cc2222;
$lionheart-rgb: 204, 34, 34;
$lionheart-light: mix(#fff, $lionheart, 20%);
$lionheart-dark: mix(#000, $lionheart, 20%);
.element {
color: $lionheart;
box-shadow: 0 0 0 2px rgba($lionheart, 0.35);
}