Benannte Farbe · #F72305
Spectacular Scarlet
Spectacular Scarlet ist #F72305: rgb(247 35 5), hsl(7 96% 49%), oklch(0.623 0.242 30.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Spectacular Scarlet color name →
#F72305
oklch(0.623 0.242 30.8)
Farbumrechnungen
- HEX
- #f72305
- RGB
- rgb(247 35 5)
- HSL
- hsl(7 96% 49%)
- HWB
- hwb(7 2% 3%)
- OKLCH
- oklch(0.623 0.242 30.8)
- OKLab
- oklab(0.623 0.208 0.124)
- CIE Lab
- lab(53.93 75.25 67.21)
- LCH
- lch(53.93 100.9 41.8)
- CMYK
- cmyk(0% 86% 98% 3%)
Tints · Shades · Tones
Tints
- FB4933
- FF644D
- FF7B65
- FF8F7B
- FFA391
- FFB6A7
- FFC9BD
- FFDBD3
- FFEDE9
Shades
- D71D04
- B71703
- 991102
- 7C0C01
- 600701
- 450400
- 2C0100
- 150000
- 030000
Tones
- ED3A24
- E24934
- D85441
- CD5D4C
- C16556
- B66C5F
- A97268
- 9D7770
- 8F7C78
Farbharmonien
Komplementär +180°
- F72305
Spectacular Scarlet
- 0098AC
≈ Aquarium Diver
Analog -30° +30°
- F72305
Spectacular Scarlet
- EF1A7F
≈ Jelly Berry
- C46E00
≈ Sludge
Triadisch +120° +240°
- F72305
Spectacular Scarlet
- 00A24D
≈ Link Green
- 5C78FF
≈ C64 NTSC
Geteilt komplementär +150° +210°
- F72305
Spectacular Scarlet
- 009D8B
≈ Flamboyant Teal
- 0090D5
≈ Kahu Blue
Tetradisch +90° +180° +270°
- F72305
Spectacular Scarlet
- 7B9300
≈ Mossy Woods
- 0098AC
≈ Aquarium Diver
- A253FE
≈ Vega Violet
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 4.04:1 · APCA Lc 65
Ag
AAAuf Schwarz
WCAG 5.19:1 · APCA Lc 36
Beste Textfarbe: #000000
WCAG 5.19:1 (AA) · APCA Lc 36
Contrast pairs
Code-Snippets
CSS
:root {
--spectacular-scarlet: #f72305;
--spectacular-scarlet-rgb: 247 35 5;
--spectacular-scarlet-oklch: oklch(0.623 0.242 30.8);
}
.element {
color: var(--spectacular-scarlet);
background-color: hsl(7 96% 49%);
border-color: oklch(0.623 0.242 30.8);
}Tailwind CSS v4
@theme {
--color-spectacular-scarlet: #f72305;
--color-spectacular-scarlet-50: #ffdcc9;
--color-spectacular-scarlet-100: #ffcab4;
--color-spectacular-scarlet-200: #ffab90;
--color-spectacular-scarlet-300: #ff8061;
--color-spectacular-scarlet-400: #ff5138;
--color-spectacular-scarlet-500: #ff0000;
--color-spectacular-scarlet-600: #d70000;
--color-spectacular-scarlet-700: #ad0100;
--color-spectacular-scarlet-800: #820001;
--color-spectacular-scarlet-900: #5c0202;
--color-spectacular-scarlet-950: #3e0000;
}SCSS
$spectacular-scarlet: #f72305;
$spectacular-scarlet-rgb: 247, 35, 5;
$spectacular-scarlet-light: mix(#fff, $spectacular-scarlet, 20%);
$spectacular-scarlet-dark: mix(#000, $spectacular-scarlet, 20%);
.element {
color: $spectacular-scarlet;
box-shadow: 0 0 0 2px rgba($spectacular-scarlet, 0.35);
}