Named color · #BA0728
Valentine Lava
Valentine Lava is #BA0728: rgb(186 7 40), hsl(349 93% 38%), oklch(0.5 0.199 22.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Valentine Lava color name →
#BA0728
oklch(0.5 0.199 22.5)
Color conversions
- HEX
- #ba0728
- RGB
- rgb(186 7 40)
- HSL
- hsl(349 93% 38%)
- HWB
- hwb(349 3% 27%)
- OKLCH
- oklch(0.5 0.199 22.5)
- OKLab
- oklab(0.5 0.184 0.076)
- CIE Lab
- lab(39.92 63.52 36.5)
- LCH
- lch(39.92 73.26 29.9)
- CMYK
- cmyk(0% 96% 78% 27%)
Tints · Shades · Tones
Tints
- C4363E
- CE5153
- D76967
- DF7F7C
- E69591
- EDAAA6
- F3BFBC
- F8D4D2
- FCEAE8
Shades
- A10521
- 89041B
- 720215
- 5C020F
- 460109
- 320004
- 1E0002
- 0D0001
- 020000
Tones
- B62732
- B2373C
- AE4445
- A94F4E
- A45856
- 9E615F
- 986A67
- 91716F
- 897978
Color harmonies
Complementary +180°
- BA0728
Valentine Lava
- 007178
≈ Scurf Green
Analogous -30° +30°
- BA0728
Valentine Lava
- AF106E
≈ Plum Paradise
- 9A4A00
≈ Oregon
Triadic +120° +240°
- BA0728
Valentine Lava
- 007900
≈ Green Hills
- 1D57D2
≈ Bnei Brak Bay
Split-complementary +150° +210°
- BA0728
Valentine Lava
- 00755D
≈ Tropical Rainforest
- 006C94
≈ Cairns
Tetradic +90° +180° +270°
- BA0728
Valentine Lava
- 656900
≈ Earthy Khaki Green
- 007178
≈ Scurf Green
- 6B40C8
≈ Dragonlord Purple
Contrast & accessibility
Ag
AAOn white
WCAG 6.66:1 · APCA Lc 80
Ag
FailOn black
WCAG 3.14:1 · APCA Lc 21
Best text color: #FFFFFF
WCAG 6.66:1 (AA) · APCA Lc 80
Contrast pairs
Code snippets
CSS
:root {
--valentine-lava: #ba0728;
--valentine-lava-rgb: 186 7 40;
--valentine-lava-oklch: oklch(0.5 0.199 22.5);
}
.element {
color: var(--valentine-lava);
background-color: hsl(349 93% 38%);
border-color: oklch(0.5 0.199 22.5);
}Tailwind CSS v4
@theme {
--color-valentine-lava: #ba0728;
--color-valentine-lava-50: #ffe0d9;
--color-valentine-lava-100: #ffcec7;
--color-valentine-lava-200: #ffb2aa;
--color-valentine-lava-300: #ff8b84;
--color-valentine-lava-400: #fe6466;
--color-valentine-lava-500: #ed3444;
--color-valentine-lava-600: #c82f3a;
--color-valentine-lava-700: #a1262e;
--color-valentine-lava-800: #781923;
--color-valentine-lava-900: #551017;
--color-valentine-lava-950: #390208;
}SCSS
$valentine-lava: #ba0728;
$valentine-lava-rgb: 186, 7, 40;
$valentine-lava-light: mix(#fff, $valentine-lava, 20%);
$valentine-lava-dark: mix(#000, $valentine-lava, 20%);
.element {
color: $valentine-lava;
box-shadow: 0 0 0 2px rgba($valentine-lava, 0.35);
}