Benannte Farbe · #E33928
Wistful Longing
Wistful Longing ist #E33928: rgb(227 57 40), hsl(5 77% 52%), oklch(0.604 0.209 30). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Wistful Longing color name →
#E33928
oklch(0.604 0.209 30)
Farbumrechnungen
- HEX
- #e33928
- RGB
- rgb(227 57 40)
- HSL
- hsl(5 77% 52%)
- HWB
- hwb(5 16% 11%)
- OKLCH
- oklch(0.604 0.209 30)
- OKLab
- oklab(0.604 0.181 0.104)
- CIE Lab
- lab(52.01 64.79 51.13)
- LCH
- lch(52.01 82.54 38.3)
- CMYK
- cmyk(0% 75% 82% 11%)
Tints · Shades · Tones
Tints
- E95442
- EE6A58
- F37F6D
- F79282
- FAA596
- FDB7AB
- FFC9C0
- FFDBD5
- FFEDEA
Shades
- C53021
- A8281B
- 8C1F15
- 71170F
- 571009
- 3F0904
- 270402
- 120101
- 030000
Tones
- DB4635
- D25040
- C9594A
- C06152
- B7675B
- AD6D63
- A3736A
- 987872
- 8C7C79
Farbharmonien
Komplementär +180°
- E33928
Wistful Longing
- 0092A4
≈ Oasis
Analog -30° +30°
- E33928
Wistful Longing
- DC347C
≈ Mystic Magenta
- BD6900
≈ Brown Orange
Triadisch +120° +240°
- E33928
Wistful Longing
- 009B46
≈ Boogie Blast
- 5371FC
≈ Blue Heath Butterfly
Geteilt komplementär +150° +210°
- E33928
Wistful Longing
- 009684
≈ Approval Green
- 008ACB
≈ Way Beyond the Blue
Tetradisch +90° +180° +270°
- E33928
Wistful Longing
- 778D00
≈ Canopy
- 0092A4
≈ Oasis
- 9759E9
≈ Lavender Indigo
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 4.30:1 · APCA Lc 68
Ag
AAAuf Schwarz
WCAG 4.88:1 · APCA Lc 33
Beste Textfarbe: #000000
WCAG 4.88:1 (AA) · APCA Lc 33
Contrast pairs
Code-Snippets
CSS
:root {
--wistful-longing: #e33928;
--wistful-longing-rgb: 227 57 40;
--wistful-longing-oklch: oklch(0.604 0.209 30);
}
.element {
color: var(--wistful-longing);
background-color: hsl(5 77% 52%);
border-color: oklch(0.604 0.209 30);
}Tailwind CSS v4
@theme {
--color-wistful-longing: #e33928;
--color-wistful-longing-50: #ffe0d0;
--color-wistful-longing-100: #ffcebc;
--color-wistful-longing-200: #ffb29b;
--color-wistful-longing-300: #ff8a71;
--color-wistful-longing-400: #ff624e;
--color-wistful-longing-500: #f12f1d;
--color-wistful-longing-600: #cc2b1c;
--color-wistful-longing-700: #a42316;
--color-wistful-longing-800: #7b1613;
--color-wistful-longing-900: #570f0c;
--color-wistful-longing-950: #3a0101;
}SCSS
$wistful-longing: #e33928;
$wistful-longing-rgb: 227, 57, 40;
$wistful-longing-light: mix(#fff, $wistful-longing, 20%);
$wistful-longing-dark: mix(#000, $wistful-longing, 20%);
.element {
color: $wistful-longing;
box-shadow: 0 0 0 2px rgba($wistful-longing, 0.35);
}