Nazwany kolor · #B6BBB2
Keystone Grey
Keystone Grey to #B6BBB2: rgb(182 187 178), hsl(93 6% 72%), oklch(0.786 0.014 130.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Keystone Grey color name →
#B6BBB2
oklch(0.786 0.014 130.8)
Konwersje koloru
- HEX
- #b6bbb2
- RGB
- rgb(182 187 178)
- HSL
- hsl(93 6% 72%)
- HWB
- hwb(93 70% 27%)
- OKLCH
- oklch(0.786 0.014 130.8)
- OKLab
- oklab(0.786 -0.009 0.01)
- CIE Lab
- lab(75.28 -3.05 3.93)
- LCH
- lch(75.28 4.98 127.8)
- CMYK
- cmyk(3% 0% 5% 27%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- BDC2B9
- C4C8C1
- CBCFC9
- D3D6D0
- DADDD8
- E1E3E0
- E9EAE7
- F0F1EF
- F7F8F7
Odcienie ciemniejsze
- 9EA29A
- 868A83
- 6F736D
- 595C57
- 444643
- 30322F
- 1D1F1D
- 0C0D0C
- 020201
Tony
- B0B5AD
- ABAFA8
- A5A9A3
- A0A39E
- 9B9D99
- 959794
- 90918F
- 8B8B8A
- 858685
Harmonie kolorów
Komplementarna +180°
- B6BBB2
Keystone Grey
- BCB7C0
≈ Titanium Man
Analogowa -30° +30°
- B6BBB2
Keystone Grey
- BBB9B0
≈ Glasgow Fog
- B2BCB6
≈ Loblolly
Triada +120° +240°
- B6BBB2
Keystone Grey
- B3BAC2
≈ Granite Fog
- C2B6B7
≈ Queen Anne Lilac
Komplementarna rozszczepiona +150° +210°
- B6BBB2
Keystone Grey
- B7B8C2
≈ Dolphin at Play
- C0B6BC
≈ Future Vision
Tetrada +90° +180° +270°
- B6BBB2
Keystone Grey
- B0BBBF
≈ Seersucker
- BCB7C0
≈ Titanium Man
- C1B6B2
≈ Queen Anne Lilac
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.95:1 · APCA Lc 38
Ag
AAANa czerni
WCAG 10.74:1 · APCA Lc 65
Najlepszy kolor tekstu: #000000
WCAG 10.74:1 (AAA) · APCA Lc 65
Contrast pairs
Fragmenty kodu
CSS
:root {
--keystone-grey: #b6bbb2;
--keystone-grey-rgb: 182 187 178;
--keystone-grey-oklch: oklch(0.786 0.014 130.8);
}
.element {
color: var(--keystone-grey);
background-color: hsl(93 6% 72%);
border-color: oklch(0.786 0.014 130.8);
}Tailwind CSS v4
@theme {
--color-keystone-grey: #b6bbb2;
--color-keystone-grey-50: #f4f6f2;
--color-keystone-grey-100: #e6e9e4;
--color-keystone-grey-200: #d2d5d0;
--color-keystone-grey-300: #b5b9b2;
--color-keystone-grey-400: #9ca098;
--color-keystone-grey-500: #83887f;
--color-keystone-grey-600: #6f736b;
--color-keystone-grey-700: #595c56;
--color-keystone-grey-800: #41433e;
--color-keystone-grey-900: #2d2e2b;
--color-keystone-grey-950: #1a1b18;
}SCSS
$keystone-grey: #b6bbb2;
$keystone-grey-rgb: 182, 187, 178;
$keystone-grey-light: mix(#fff, $keystone-grey, 20%);
$keystone-grey-dark: mix(#000, $keystone-grey, 20%);
.element {
color: $keystone-grey;
box-shadow: 0 0 0 2px rgba($keystone-grey, 0.35);
}