Nazwany kolor · #A8C0BB
Harbour Grey
Harbour Grey to #A8C0BB: rgb(168 192 187), hsl(167 16% 71%), oklch(0.788 0.027 181.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Harbour Grey color name →
#A8C0BB
oklch(0.788 0.027 181.6)
Konwersje koloru
- HEX
- #a8c0bb
- RGB
- rgb(168 192 187)
- HSL
- hsl(167 16% 71%)
- HWB
- hwb(167 66% 25%)
- OKLCH
- oklch(0.788 0.027 181.6)
- OKLab
- oklab(0.788 -0.027 -0.001)
- CIE Lab
- lab(75.77 -9.21 -0.38)
- LCH
- lch(75.77 9.22 182.4)
- CMYK
- cmyk(13% 0% 3% 25%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B1C6C2
- B9CCC8
- C2D3CF
- CAD9D6
- D3DFDD
- DCE5E3
- E4ECEA
- EDF2F1
- F6F9F8
Odcienie ciemniejsze
- 92A7A2
- 7C8E8A
- 677673
- 525F5C
- 3F4946
- 2C3432
- 1A201F
- 0A0E0D
- 010202
Tony
- A4B9B5
- A0B3AF
- 9CACA9
- 98A6A3
- 949F9D
- 909997
- 8C9391
- 888C8B
- 848686
Harmonie kolorów
Komplementarna +180°
- A8C0BB
Harbour Grey
- CAB3B9
≈ Izmir Pink
Analogowa -30° +30°
- A8C0BB
Harbour Grey
- AEBFB1
≈ Cottage Charm
- A7BFC4
≈ A-List Blue
Triada +120° +240°
- A8C0BB
Harbour Grey
- BDB6C9
≈ Wedding Flowers
- C7B7A9
≈ Mooloolaba
Komplementarna rozszczepiona +150° +210°
- A8C0BB
Harbour Grey
- C5B4C2
≈ Pink Bravado
- CBB4AF
≈ Puka Shell
Tetrada +90° +180° +270°
- A8C0BB
Harbour Grey
- B3B9CC
≈ Heritage
- CAB3B9
≈ Izmir Pink
- C0BAA7
≈ Ash
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.92:1 · APCA Lc 37
Ag
AAANa czerni
WCAG 10.92:1 · APCA Lc 66
Najlepszy kolor tekstu: #000000
WCAG 10.92:1 (AAA) · APCA Lc 66
Contrast pairs
Fragmenty kodu
CSS
:root {
--harbour-grey: #a8c0bb;
--harbour-grey-rgb: 168 192 187;
--harbour-grey-oklch: oklch(0.788 0.027 181.6);
}
.element {
color: var(--harbour-grey);
background-color: hsl(167 16% 71%);
border-color: oklch(0.788 0.027 181.6);
}Tailwind CSS v4
@theme {
--color-harbour-grey: #a8c0bb;
--color-harbour-grey-50: #edf8f6;
--color-harbour-grey-100: #dfebe9;
--color-harbour-grey-200: #c8d8d5;
--color-harbour-grey-300: #a9bcb9;
--color-harbour-grey-400: #8ea49f;
--color-harbour-grey-500: #738c87;
--color-harbour-grey-600: #627772;
--color-harbour-grey-700: #4e5f5c;
--color-harbour-grey-800: #394643;
--color-harbour-grey-900: #27302e;
--color-harbour-grey-950: #151c1b;
}SCSS
$harbour-grey: #a8c0bb;
$harbour-grey-rgb: 168, 192, 187;
$harbour-grey-light: mix(#fff, $harbour-grey, 20%);
$harbour-grey-dark: mix(#000, $harbour-grey, 20%);
.element {
color: $harbour-grey;
box-shadow: 0 0 0 2px rgba($harbour-grey, 0.35);
}