Benannte Farbe · #AB0102
Velvet Volcano
Velvet Volcano ist #AB0102: rgb(171 1 2), hsl(360 99% 34%), oklch(0.466 0.191 29). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Velvet Volcano color name →
#AB0102
oklch(0.466 0.191 29)
Farbumrechnungen
- HEX
- #ab0102
- RGB
- rgb(171 1 2)
- HSL
- hsl(360 99% 34%)
- HWB
- hwb(360 0% 33%)
- OKLCH
- oklch(0.466 0.191 29)
- OKLab
- oklab(0.466 0.167 0.092)
- CIE Lab
- lab(36.15 59.79 50.75)
- LCH
- lch(36.15 78.43 40.3)
- CMYK
- cmyk(0% 99% 99% 33%)
Tints · Shades · Tones
Tints
- B73227
- C24D40
- CC6557
- D57C6F
- DE9286
- E6A79D
- EEBDB5
- F4D3CD
- FAE9E6
Shades
- 940101
- 7E0101
- 680001
- 540000
- 400000
- 2D0000
- 1B0000
- 0B0000
- 010000
Tones
- A9231A
- A63329
- A34135
- A04C41
- 9C564C
- 985F57
- 936861
- 8E706B
- 877876
Farbharmonien
Komplementär +180°
- AB0102
Velvet Volcano
- 006672
≈ Wakame Green
Analog -30° +30°
- AB0102
Velvet Volcano
- A40057
≈ Violet Red
- 864700
≈ Chocolate Pancakes
Triadisch +120° +240°
- AB0102
Velvet Volcano
- 006D2C
≈ Ireland Green
- 3149C2
≈ Kikorangi Blue
Geteilt komplementär +150° +210°
- AB0102
Velvet Volcano
- 00695B
≈ Bella Vista
- 00608E
≈ Felix
Tetradisch +90° +180° +270°
- AB0102
Velvet Volcano
- 536200
≈ Serrano Pepper
- 006672
≈ Wakame Green
- 6B33B3
≈ Purple Emperor
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 7.67:1 · APCA Lc 84
Ag
FailAuf Schwarz
WCAG 2.73:1 · APCA Lc 18
Beste Textfarbe: #FFFFFF
WCAG 7.67:1 (AAA) · APCA Lc 84
Contrast pairs
Code-Snippets
CSS
:root {
--velvet-volcano: #ab0102;
--velvet-volcano-rgb: 171 1 2;
--velvet-volcano-oklch: oklch(0.466 0.191 29);
}
.element {
color: var(--velvet-volcano);
background-color: hsl(360 99% 34%);
border-color: oklch(0.466 0.191 29);
}Tailwind CSS v4
@theme {
--color-velvet-volcano: #ab0102;
--color-velvet-volcano-50: #ffe2d4;
--color-velvet-volcano-100: #ffd1c1;
--color-velvet-volcano-200: #ffb5a2;
--color-velvet-volcano-300: #ff8f7a;
--color-velvet-volcano-400: #fb6959;
--color-velvet-volcano-500: #e93e31;
--color-velvet-volcano-600: #c5372b;
--color-velvet-volcano-700: #9f2c22;
--color-velvet-volcano-800: #771d1a;
--color-velvet-volcano-900: #541411;
--color-velvet-volcano-950: #380404;
}SCSS
$velvet-volcano: #ab0102;
$velvet-volcano-rgb: 171, 1, 2;
$velvet-volcano-light: mix(#fff, $velvet-volcano, 20%);
$velvet-volcano-dark: mix(#000, $velvet-volcano, 20%);
.element {
color: $velvet-volcano;
box-shadow: 0 0 0 2px rgba($velvet-volcano, 0.35);
}