Benannte Farbe · #7E969F
Kingfisher Grey
Kingfisher Grey ist #7E969F: rgb(126 150 159), hsl(196 15% 56%), oklch(0.658 0.03 222.5). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Kingfisher Grey color name →
#7E969F
oklch(0.658 0.03 222.5)
Farbumrechnungen
- HEX
- #7e969f
- RGB
- rgb(126 150 159)
- HSL
- hsl(196 15% 56%)
- HWB
- hwb(196 49% 38%)
- OKLCH
- oklch(0.658 0.03 222.5)
- OKLab
- oklab(0.658 -0.022 -0.02)
- CIE Lab
- lab(60.43 -7.25 -7.73)
- LCH
- lch(60.43 10.6 226.9)
- CMYK
- cmyk(21% 6% 0% 38%)
Tints · Shades · Tones
Tints
- 8AA0A8
- 97AAB2
- A3B4BB
- B0BFC4
- BDC9CE
- CAD4D8
- D7DFE1
- E4E9EB
- F2F4F5
Shades
- 6D828A
- 5C6E75
- 4C5B61
- 3C494D
- 2D373B
- 1F2629
- 111618
- 050809
- 010101
Tones
- 7E949C
- 7F9299
- 7F8F96
- 7F8D93
- 7F8B8F
- 80898C
- 808789
- 808486
- 808283
Farbharmonien
Komplementär +180°
- 7E969F
Kingfisher Grey
- A28C83
≈ Portobello
Analog -30° +30°
- 7E969F
Kingfisher Grey
- 7D9896
≈ Green Granite
- 8593A4
≈ Fantasy Grey
Triadisch +120° +240°
- 7E969F
Kingfisher Grey
- 9F8A96
≈ Piano Mauve
- 95937D
≈ Water Scrub
Geteilt komplementär +150° +210°
- 7E969F
Kingfisher Grey
- A38A8C
≈ Tin Pink
- 9D8F7E
≈ Kommando Khaki
Tetradisch +90° +180° +270°
- 7E969F
Kingfisher Grey
- 988C9F
≈ Gentle Mauve
- A28C83
≈ Portobello
- 8A9683
≈ Agreeable Green
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.11:1 · APCA Lc 58
Ag
AAAuf Schwarz
WCAG 6.75:1 · APCA Lc 44
Beste Textfarbe: #000000
WCAG 6.75:1 (AA) · APCA Lc 44
Contrast pairs
Code-Snippets
CSS
:root {
--kingfisher-grey: #7e969f;
--kingfisher-grey-rgb: 126 150 159;
--kingfisher-grey-oklch: oklch(0.658 0.03 222.5);
}
.element {
color: var(--kingfisher-grey);
background-color: hsl(196 15% 56%);
border-color: oklch(0.658 0.03 222.5);
}Tailwind CSS v4
@theme {
--color-kingfisher-grey: #7e969f;
--color-kingfisher-grey-50: #ecf7fc;
--color-kingfisher-grey-100: #deeaef;
--color-kingfisher-grey-200: #c7d7de;
--color-kingfisher-grey-300: #a8bbc3;
--color-kingfisher-grey-400: #8ca3ac;
--color-kingfisher-grey-500: #718b95;
--color-kingfisher-grey-600: #60767e;
--color-kingfisher-grey-700: #4c5e65;
--color-kingfisher-grey-800: #37454a;
--color-kingfisher-grey-900: #263033;
--color-kingfisher-grey-950: #141c1f;
}SCSS
$kingfisher-grey: #7e969f;
$kingfisher-grey-rgb: 126, 150, 159;
$kingfisher-grey-light: mix(#fff, $kingfisher-grey, 20%);
$kingfisher-grey-dark: mix(#000, $kingfisher-grey, 20%);
.element {
color: $kingfisher-grey;
box-shadow: 0 0 0 2px rgba($kingfisher-grey, 0.35);
}