Benannte Farbe · #680018
Claret
Claret ist #680018: rgb(104 0 24), hsl(346 100% 20%), oklch(0.328 0.131 18.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Claret color name →
#680018
oklch(0.328 0.131 18.8)
Farbumrechnungen
- HEX
- #680018
- RGB
- rgb(104 0 24)
- HSL
- hsl(346 100% 20%)
- HWB
- hwb(346 0% 59%)
- OKLCH
- oklch(0.328 0.131 18.8)
- OKLab
- oklab(0.328 0.124 0.042)
- CIE Lab
- lab(20.58 42.29 19.63)
- LCH
- lch(20.58 46.62 24.9)
- CMYK
- cmyk(0% 100% 77% 59%)
Tints · Shades · Tones
Tints
- 79242C
- 8A3D41
- 9A5456
- A96C6D
- B88384
- C79B9B
- D6B4B3
- E4CCCC
- F2E5E5
Shades
- 590013
- 4B000F
- 3E000A
- 300007
- 240004
- 180002
- 0C0001
- 040000
- 000000
Tones
- 6C1722
- 70262C
- 743336
- 773E40
- 7A4A4B
- 7C5555
- 7E605F
- 7F6A6A
- 807575
Farbharmonien
Komplementär +180°
- 680018
Claret
- 003D3F
≈ Rich Black
Analog -30° +30°
- 680018
Claret
- 60053F
≈ Tyrian Purple
- 572300
≈ Conker Brown
Triadisch +120° +240°
- 680018
Claret
- 134000
≈ Hunter Green
- 003073
≈ Konjō Blue
Geteilt komplementär +150° +210°
- 680018
Claret
- 003F2F
≈ Mizukaze Green
- 003B4F
≈ Gibraltar Sea
Tetradisch +90° +180° +270°
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 13.11:1 · APCA Lc 97
Ag
FailAuf Schwarz
WCAG 1.60:1 · APCA Lc 0
Beste Textfarbe: #FFFFFF
WCAG 13.11:1 (AAA) · APCA Lc 97
Contrast pairs
Code-Snippets
CSS
:root {
--claret: #680018;
--claret-rgb: 104 0 24;
--claret-oklch: oklch(0.328 0.131 18.8);
}
.element {
color: var(--claret);
background-color: hsl(346 100% 20%);
border-color: oklch(0.328 0.131 18.8);
}Tailwind CSS v4
@theme {
--color-claret: #680018;
--color-claret-50: #ffe7e5;
--color-claret-100: #ffd7d5;
--color-claret-200: #ffbebc;
--color-claret-300: #f39c9b;
--color-claret-400: #e17c80;
--color-claret-500: #ce5d63;
--color-claret-600: #ae4f54;
--color-claret-700: #8c3f43;
--color-claret-800: #682d32;
--color-claret-900: #491e22;
--color-claret-950: #300e11;
}SCSS
$claret: #680018;
$claret-rgb: 104, 0, 24;
$claret-light: mix(#fff, $claret, 20%);
$claret-dark: mix(#000, $claret, 20%);
.element {
color: $claret;
box-shadow: 0 0 0 2px rgba($claret, 0.35);
}