Benannte Farbe · #7E9CA0
Grand Boulevard
Grand Boulevard ist #7E9CA0: rgb(126 156 160), hsl(187 15% 56%), oklch(0.671 0.034 206.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Grand Boulevard color name →
#7E9CA0
oklch(0.671 0.034 206.3)
Farbumrechnungen
- HEX
- #7e9ca0
- RGB
- rgb(126 156 160)
- HSL
- hsl(187 15% 56%)
- HWB
- hwb(187 49% 37%)
- OKLCH
- oklch(0.671 0.034 206.3)
- OKLab
- oklab(0.671 -0.03 -0.015)
- CIE Lab
- lab(62.17 -10.12 -5.74)
- LCH
- lch(62.17 11.64 209.6)
- CMYK
- cmyk(21% 2% 0% 37%)
Tints · Shades · Tones
Tints
- 8AA6A9
- 97AFB2
- A4B9BC
- B0C3C5
- BDCCCF
- CAD6D8
- D7E0E2
- E4EBEB
- F2F5F5
Shades
- 6D878B
- 5C7376
- 4C5F61
- 3C4C4E
- 2D393B
- 1F2829
- 111819
- 050909
- 010101
Tones
- 7E999D
- 7F969A
- 7F9496
- 7F9193
- 808E90
- 808B8D
- 808889
- 808686
- 808383
Farbharmonien
Komplementär +180°
- 7E9CA0
Grand Boulevard
- AA8E8B
≈ Ash Hollow
Analog -30° +30°
- 7E9CA0
Grand Boulevard
- 809D95
≈ Mountain Outlook
- 8299A8
≈ Beach Umbrella
Triadisch +120° +240°
- 7E9CA0
Grand Boulevard
- A18FA1
≈ Cut Heather
- 9F957E
≈ Weather Board
Geteilt komplementär +150° +210°
- 7E9CA0
Grand Boulevard
- A88D96
≈ Gothic Amethyst
- A79182
≈ Beach Cabana
Tetradisch +90° +180° +270°
- 7E9CA0
Grand Boulevard
- 9792A9
≈ Jazz Tune
- AA8E8B
≈ Ash Hollow
- 949981
≈ Milkweed Pod
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.93:1 · APCA Lc 56
Ag
AAAAuf Schwarz
WCAG 7.15:1 · APCA Lc 46
Beste Textfarbe: #000000
WCAG 7.15:1 (AAA) · APCA Lc 46
Contrast pairs
Code-Snippets
CSS
:root {
--grand-boulevard: #7e9ca0;
--grand-boulevard-rgb: 126 156 160;
--grand-boulevard-oklch: oklch(0.671 0.034 206.3);
}
.element {
color: var(--grand-boulevard);
background-color: hsl(187 15% 56%);
border-color: oklch(0.671 0.034 206.3);
}Tailwind CSS v4
@theme {
--color-grand-boulevard: #7e9ca0;
--color-grand-boulevard-50: #ebf8fa;
--color-grand-boulevard-100: #dcebee;
--color-grand-boulevard-200: #c5d9dc;
--color-grand-boulevard-300: #a4bdc1;
--color-grand-boulevard-400: #88a5a8;
--color-grand-boulevard-500: #6c8d91;
--color-grand-boulevard-600: #5c777b;
--color-grand-boulevard-700: #495f62;
--color-grand-boulevard-800: #354648;
--color-grand-boulevard-900: #243032;
--color-grand-boulevard-950: #131d1e;
}SCSS
$grand-boulevard: #7e9ca0;
$grand-boulevard-rgb: 126, 156, 160;
$grand-boulevard-light: mix(#fff, $grand-boulevard, 20%);
$grand-boulevard-dark: mix(#000, $grand-boulevard, 20%);
.element {
color: $grand-boulevard;
box-shadow: 0 0 0 2px rgba($grand-boulevard, 0.35);
}