Named color · #CF1020
Lava
Lava is #CF1020: rgb(207 16 32), hsl(355 86% 44%), oklch(0.542 0.214 26.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Lava color name →
#CF1020
oklch(0.542 0.214 26.1)
Color conversions
- HEX
- #cf1020
- RGB
- rgb(207 16 32)
- HSL
- hsl(355 86% 44%)
- HWB
- hwb(355 6% 19%)
- OKLCH
- oklch(0.542 0.214 26.1)
- OKLab
- oklab(0.542 0.193 0.094)
- CIE Lab
- lab(44.72 67.85 47.29)
- LCH
- lch(44.72 82.7 34.9)
- CMYK
- cmyk(0% 92% 85% 19%)
Tints · Shades · Tones
Tints
- D73C3A
- DF5750
- E66F66
- EC847B
- F19991
- F6AEA6
- FAC2BC
- FCD7D2
- FEEBE8
Shades
- B40C1A
- 990915
- 7F060F
- 67040A
- 4F0206
- 380103
- 230001
- 100000
- 020000
Tones
- C92C2E
- C33D39
- BC4943
- B5544D
- AE5D56
- A6655F
- 9E6C67
- 95736F
- 8B7A78
Color harmonies
Complementary +180°
- CF1020
Lava
- 007E8A
≈ Metallic Seaweed
Analogous -30° +30°
- CF1020
Lava
- C51273
≈ Crazy Ex
- A75700
≈ Windsor Brown
Triadic +120° +240°
Split-complementary +150° +210°
- CF1020
Lava
- 00826D
≈ Emperor’s Silk
- 0078AA
≈ Deluge
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 5.60:1 · APCA Lc 76
Ag
FailOn black
WCAG 3.74:1 · APCA Lc 26
Best text color: #FFFFFF
WCAG 5.60:1 (AA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--lava: #cf1020;
--lava-rgb: 207 16 32;
--lava-oklch: oklch(0.542 0.214 26.1);
}
.element {
color: var(--lava);
background-color: hsl(355 86% 44%);
border-color: oklch(0.542 0.214 26.1);
}Tailwind CSS v4
@theme {
--color-lava: #cf1020;
--color-lava-50: #ffded3;
--color-lava-100: #ffcdc0;
--color-lava-200: #ffafa0;
--color-lava-300: #ff8777;
--color-lava-400: #ff5d57;
--color-lava-500: #f4242e;
--color-lava-600: #ce2429;
--color-lava-700: #a61d20;
--color-lava-800: #7c1219;
--color-lava-900: #580c10;
--color-lava-950: #3b0004;
}SCSS
$lava: #cf1020;
$lava-rgb: 207, 16, 32;
$lava-light: mix(#fff, $lava, 20%);
$lava-dark: mix(#000, $lava, 20%);
.element {
color: $lava;
box-shadow: 0 0 0 2px rgba($lava, 0.35);
}