Color con nombre · #A8C0BB
Harbour Grey
Harbour Grey es #A8C0BB: rgb(168 192 187), hsl(167 16% 71%), oklch(0.788 0.027 181.6). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Harbour Grey color name →
#A8C0BB
oklch(0.788 0.027 181.6)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- B1C6C2
- B9CCC8
- C2D3CF
- CAD9D6
- D3DFDD
- DCE5E3
- E4ECEA
- EDF2F1
- F6F9F8
Sombras
- 92A7A2
- 7C8E8A
- 677673
- 525F5C
- 3F4946
- 2C3432
- 1A201F
- 0A0E0D
- 010202
Tonos
- A4B9B5
- A0B3AF
- 9CACA9
- 98A6A3
- 949F9D
- 909997
- 8C9391
- 888C8B
- 848686
Armonías de color
Complementario +180°
- A8C0BB
Harbour Grey
- CAB3B9
≈ Izmir Pink
Análogo -30° +30°
- A8C0BB
Harbour Grey
- AEBFB1
≈ Cottage Charm
- A7BFC4
≈ A-List Blue
Triádico +120° +240°
- A8C0BB
Harbour Grey
- BDB6C9
≈ Wedding Flowers
- C7B7A9
≈ Mooloolaba
Complementario dividido +150° +210°
- A8C0BB
Harbour Grey
- C5B4C2
≈ Pink Bravado
- CBB4AF
≈ Puka Shell
Tetrádico +90° +180° +270°
- A8C0BB
Harbour Grey
- B3B9CC
≈ Heritage
- CAB3B9
≈ Izmir Pink
- C0BAA7
≈ Ash
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.92:1 · APCA Lc 37
Ag
AAASobre negro
WCAG 10.92:1 · APCA Lc 66
Mejor color de texto: #000000
WCAG 10.92:1 (AAA) · APCA Lc 66
Contrast pairs
Fragmentos de código
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);
}