Benannte Farbe · #9437FF
Sugar Grape
Sugar Grape ist #9437FF: rgb(148 55 255), hsl(268 100% 61%), oklch(0.579 0.269 298.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Purple mean? → · Sugar Grape color name →
#9437FF
oklch(0.579 0.269 298.3)
Farbumrechnungen
- HEX
- #9437ff
- RGB
- rgb(148 55 255)
- HSL
- hsl(268 100% 61%)
- HWB
- hwb(268 22% 0%)
- OKLCH
- oklch(0.579 0.269 298.3)
- OKLab
- oklab(0.579 0.128 -0.237)
- CIE Lab
- lab(46.16 65.86 -84.11)
- LCH
- lch(46.16 106.83 308.1)
- CMYK
- cmyk(42% 78% 0% 0%)
Tints · Shades · Tones
Tints
- 9D54FF
- A76CFF
- B181FF
- BB94FF
- C6A7FF
- D0B9FF
- DCCBFF
- E7DCFF
- F3EEFF
Shades
- 802EDE
- 6D26BE
- 5A1E9E
- 481680
- 360F63
- 260848
- 16032E
- 080116
- 010003
Tones
- 9146F3
- 8F51E7
- 8C5BDA
- 8A62CE
- 8869C2
- 866FB5
- 8474A8
- 83789B
- 817C8E
Farbharmonien
Komplementär +180°
- 9437FF
Sugar Grape
- 738400
≈ Swamp Green
Analog -30° +30°
- 9437FF
Sugar Grape
- 4466FF
≈ Blue Titmouse
- C600C6
≈ Screaming Magenta
Triadisch +120° +240°
- 9437FF
Sugar Grape
- B56100
≈ Orangish Brown
- 008E7A
≈ Greenlake
Geteilt komplementär +150° +210°
- 9437FF
Sugar Grape
- 977500
≈ Mesozoic Green
- 00933B
≈ Pixelated Grass
Tetradisch +90° +180° +270°
- 9437FF
Sugar Grape
- E5000D
≈ Miyamoto Red
- 738400
≈ Swamp Green
- 008A99
≈ Atlantic Blue
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 4.94:1 · APCA Lc 73
Ag
FailAuf Schwarz
WCAG 4.24:1 · APCA Lc 29
Beste Textfarbe: #FFFFFF
WCAG 4.94:1 (AA) · APCA Lc 73
Contrast pairs
Code-Snippets
CSS
:root {
--sugar-grape: #9437ff;
--sugar-grape-rgb: 148 55 255;
--sugar-grape-oklch: oklch(0.579 0.269 298.3);
}
.element {
color: var(--sugar-grape);
background-color: hsl(268 100% 61%);
border-color: oklch(0.579 0.269 298.3);
}Tailwind CSS v4
@theme {
--color-sugar-grape: #9437ff;
--color-sugar-grape-50: #ffe4ff;
--color-sugar-grape-100: #f6d3ff;
--color-sugar-grape-200: #e7b7ff;
--color-sugar-grape-300: #cf90ff;
--color-sugar-grape-400: #b66bff;
--color-sugar-grape-500: #a338ff;
--color-sugar-grape-600: #8a33ee;
--color-sugar-grape-700: #6e29c0;
--color-sugar-grape-800: #4f1d92;
--color-sugar-grape-900: #371467;
--color-sugar-grape-950: #220248;
}SCSS
$sugar-grape: #9437ff;
$sugar-grape-rgb: 148, 55, 255;
$sugar-grape-light: mix(#fff, $sugar-grape, 20%);
$sugar-grape-dark: mix(#000, $sugar-grape, 20%);
.element {
color: $sugar-grape;
box-shadow: 0 0 0 2px rgba($sugar-grape, 0.35);
}