Nearest named color · #BA0028
#BA0028
Nearest named color: Valentine Lava
#BA0028 (rgb(186 0 40), hsl(347 100% 36%), oklch(0.498 0.201 22.1)) is closest to the named color Valentine Lava. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#BA0028
oklch(0.498 0.201 22.1)
Color conversions
- HEX
- #ba0028
- RGB
- rgb(186 0 40)
- HSL
- hsl(347 100% 36%)
- HWB
- hwb(347 0% 27%)
- OKLCH
- oklch(0.498 0.201 22.1)
- OKLab
- oklab(0.498 0.186 0.075)
- CIE Lab
- lab(39.67 64.24 36.24)
- LCH
- lch(39.67 73.76 29.4)
- CMYK
- cmyk(0% 100% 78% 27%)
Tints · Shades · Tones
Tints
- C4343E
- CE5052
- D76867
- DF7E7C
- E69491
- EDA9A6
- F3BFBC
- F8D4D2
- FCEAE8
Shades
- A10021
- 89001B
- 720015
- 5C000F
- 460009
- 320004
- 1E0002
- 0D0001
- 020000
Tones
- B62432
- B2363C
- AE4345
- A94E4E
- A45856
- 9E615F
- 986967
- 91716F
- 897978
Color harmonies
Complementary +180°
- BA0028
Valentine Lava
- 007177
≈ Scaly Green
Analogous -30° +30°
- BA0028
Valentine Lava
- AF0C6E
≈ Plum Paradise
- 994900
≈ Oregon
Triadic +120° +240°
- BA0028
Valentine Lava
- 097800
≈ Green Hills
- 1857D2
≈ Bnei Brak Bay
Split-complementary +150° +210°
- BA0028
Valentine Lava
- 00745C
≈ Tropical Rainforest
- 006C92
≈ Pure Light Blue
Tetradic +90° +180° +270°
- BA0028
Valentine Lava
- 656800
≈ Earthy Khaki Green
- 007177
≈ Scaly Green
- 6A3FC8
≈ Dragonlord Purple
Contrast & accessibility
Ag
AAOn white
WCAG 6.73:1 · APCA Lc 81
Ag
FailOn black
WCAG 3.11:1 · APCA Lc 21
Best text color: #FFFFFF
WCAG 6.73:1 (AA) · APCA Lc 81
Contrast pairs
Code snippets
CSS
:root {
--valentine-lava: #ba0028;
--valentine-lava-rgb: 186 0 40;
--valentine-lava-oklch: oklch(0.498 0.201 22.1);
}
.element {
color: var(--valentine-lava);
background-color: hsl(347 100% 36%);
border-color: oklch(0.498 0.201 22.1);
}Tailwind CSS v4
@theme {
--color-valentine-lava: #ba0028;
--color-valentine-lava-50: #ffdfd9;
--color-valentine-lava-100: #ffcec7;
--color-valentine-lava-200: #ffb1aa;
--color-valentine-lava-300: #ff8a84;
--color-valentine-lava-400: #ff6366;
--color-valentine-lava-500: #ee3244;
--color-valentine-lava-600: #c92d3b;
--color-valentine-lava-700: #a2242f;
--color-valentine-lava-800: #791823;
--color-valentine-lava-900: #551017;
--color-valentine-lava-950: #390109;
}SCSS
$valentine-lava: #ba0028;
$valentine-lava-rgb: 186, 0, 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);
}