Nazwany kolor · #CC2222
Lionheart
Lionheart to #CC2222: rgb(204 34 34), hsl(0 71% 47%), oklch(0.545 0.204 27.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Lionheart color name →
#CC2222
oklch(0.545 0.204 27.4)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D4433B
- DC5C51
- E37267
- E9877C
- EF9C91
- F4B0A7
- F8C4BC
- FBD7D2
- FEEBE9
Odcienie ciemniejsze
- B11C1C
- 971616
- 7E1111
- 650B0B
- 4E0707
- 370303
- 220101
- 0F0000
- 020000
Tony
- C6352F
- C0423A
- BA4D44
- B3574E
- AC5F56
- A5675F
- 9D6E68
- 947470
- 8A7A78
Harmonie kolorów
Komplementarna +180°
- CC2222
Lionheart
- 007F8C
≈ Metallic Seaweed
Analogowa -30° +30°
- CC2222
Lionheart
- C32071
≈ Treasured Love
- A75800
≈ Windsor Brown
Triada +120° +240°
- CC2222
Lionheart
- 008831
≈ Broccoli Paradise
- 3D61E4
≈ Bluetiful
Komplementarna rozszczepiona +150° +210°
- CC2222
Lionheart
- 00836F
≈ Viridis
- 0079AD
≈ Sixties Blue
Tetrada +90° +180° +270°
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.49:1 · APCA Lc 76
Ag
FailNa czerni
WCAG 3.81:1 · APCA Lc 26
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.49:1 (AA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
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);
}