Benannte Farbe · #335287
Blue Quartz
Blue Quartz ist #335287: rgb(51 82 135), hsl(218 45% 36%), oklch(0.441 0.095 260.5). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Blue Quartz color name →
#335287
oklch(0.441 0.095 260.5)
Farbumrechnungen
- HEX
- #335287
- RGB
- rgb(51 82 135)
- HSL
- hsl(218 45% 36%)
- HWB
- hwb(218 20% 47%)
- OKLCH
- oklch(0.441 0.095 260.5)
- OKLab
- oklab(0.441 -0.016 -0.094)
- CIE Lab
- lab(34.51 1.81 -33.69)
- LCH
- lch(34.51 33.74 273.1)
- CMYK
- cmyk(62% 39% 0% 47%)
Tints · Shades · Tones
Tints
- 466293
- 59739F
- 6C84AB
- 8095B7
- 94A6C3
- A9B7CF
- BEC9DB
- D3DBE7
- E9EDF3
Shades
- 2B4675
- 233B63
- 1C2F51
- 142541
- 0D1A31
- 071121
- 030813
- 010206
- 000001
Tones
- 3B5787
- 425C87
- 4A6186
- 526586
- 596A85
- 616E84
- 697383
- 707782
- 787C81
Farbharmonien
Komplementär +180°
- 335287
Blue Quartz
- 6D4C00
≈ Antique Bronze
Analog -30° +30°
- 335287
Blue Quartz
- 005B7A
≈ Job’s Tears
- 534883
≈ Victoria
Triadisch +120° +240°
- 335287
Blue Quartz
- 7F3B3C
≈ Wild Berry
- 335F2B
≈ Deep Into the Wood
Geteilt komplementär +150° +210°
- 335287
Blue Quartz
- 7C411B
≈ Walnut
- 565703
≈ Douro
Tetradisch +90° +180° +270°
- 335287
Blue Quartz
- 793B5A
≈ Passionate Plum
- 6D4C00
≈ Antique Bronze
- 00624C
≈ Sci-Fi Takeout
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 7.78:1 · APCA Lc 87
Ag
FailAuf Schwarz
WCAG 2.69:1 · APCA Lc 15
Beste Textfarbe: #FFFFFF
WCAG 7.78:1 (AAA) · APCA Lc 87
Contrast pairs
Code-Snippets
CSS
:root {
--blue-quartz: #335287;
--blue-quartz-rgb: 51 82 135;
--blue-quartz-oklch: oklch(0.441 0.095 260.5);
}
.element {
color: var(--blue-quartz);
background-color: hsl(218 45% 36%);
border-color: oklch(0.441 0.095 260.5);
}Tailwind CSS v4
@theme {
--color-blue-quartz: #335287;
--color-blue-quartz-50: #e7f6ff;
--color-blue-quartz-100: #d7e9ff;
--color-blue-quartz-200: #bfd5fe;
--color-blue-quartz-300: #9db8e9;
--color-blue-quartz-400: #7e9fd7;
--color-blue-quartz-500: #6186c5;
--color-blue-quartz-600: #5272a6;
--color-blue-quartz-700: #425b86;
--color-blue-quartz-800: #2e4363;
--color-blue-quartz-900: #1f2e46;
--color-blue-quartz-950: #0f1b2d;
}SCSS
$blue-quartz: #335287;
$blue-quartz-rgb: 51, 82, 135;
$blue-quartz-light: mix(#fff, $blue-quartz, 20%);
$blue-quartz-dark: mix(#000, $blue-quartz, 20%);
.element {
color: $blue-quartz;
box-shadow: 0 0 0 2px rgba($blue-quartz, 0.35);
}