Named color · #680C08
Beastly Red
Beastly Red is #680C08: rgb(104 12 8), hsl(3 86% 22%), oklch(0.333 0.125 28.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Beastly Red color name →
#680C08
oklch(0.333 0.125 28.9)
Color conversions
- HEX
- #680c08
- RGB
- rgb(104 12 8)
- HSL
- hsl(3 86% 22%)
- HWB
- hwb(3 3% 59%)
- OKLCH
- oklch(0.333 0.125 28.9)
- OKLab
- oklab(0.333 0.11 0.06)
- CIE Lab
- lab(21.43 39.13 29.36)
- LCH
- lch(21.43 48.92 36.9)
- CMYK
- cmyk(0% 88% 92% 59%)
Tints · Shades · Tones
Tints
- 792A21
- 894138
- 99584F
- A86F66
- B8867E
- C69D97
- D5B5B0
- E3CDCA
- F1E6E4
Shades
- 590906
- 4B0604
- 3E0403
- 300302
- 240201
- 180101
- 0C0000
- 040000
- 000000
Tones
- 6C1E17
- 702B23
- 73362F
- 76423A
- 794C46
- 7B5751
- 7D615D
- 7F6B68
- 807674
Color harmonies
Complementary +180°
- 680C08
Beastly Red
- 003E46
≈ Ghostlands Coal
Analogous -30° +30°
- 680C08
Beastly Red
- 640A35
≈ Spanish Purple
- 532A00
≈ Kyoto House
Triadic +120° +240°
- 680C08
Beastly Red
- 004318
≈ Wailing Woods
- 1D2D75
≈ St. Patrick’s Blue
Split-complementary +150° +210°
- 680C08
Beastly Red
- 004037
≈ Botanical Night
- 003A58
≈ Gibraltar Sea
Tetradic +90° +180° +270°
- 680C08
Beastly Red
- 323B00
≈ Dark Olive
- 003E46
≈ Ghostlands Coal
- 40206C
≈ Fading Horizon
Contrast & accessibility
Ag
AAAOn white
WCAG 12.76:1 · APCA Lc 97
Ag
FailOn black
WCAG 1.64:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.76:1 (AAA) · APCA Lc 97
Contrast pairs
Code snippets
CSS
:root {
--beastly-red: #680c08;
--beastly-red-rgb: 104 12 8;
--beastly-red-oklch: oklch(0.333 0.125 28.9);
}
.element {
color: var(--beastly-red);
background-color: hsl(3 86% 22%);
border-color: oklch(0.333 0.125 28.9);
}Tailwind CSS v4
@theme {
--color-beastly-red: #680c08;
--color-beastly-red-50: #ffe9e0;
--color-beastly-red-100: #ffd9cf;
--color-beastly-red-200: #ffc1b4;
--color-beastly-red-300: #f09f90;
--color-beastly-red-400: #df8073;
--color-beastly-red-500: #cc6254;
--color-beastly-red-600: #ac5348;
--color-beastly-red-700: #8a4239;
--color-beastly-red-800: #672f2a;
--color-beastly-red-900: #48201c;
--color-beastly-red-950: #2f0f0d;
}SCSS
$beastly-red: #680c08;
$beastly-red-rgb: 104, 12, 8;
$beastly-red-light: mix(#fff, $beastly-red, 20%);
$beastly-red-dark: mix(#000, $beastly-red, 20%);
.element {
color: $beastly-red;
box-shadow: 0 0 0 2px rgba($beastly-red, 0.35);
}