Nazwany kolor · #99A7AB
Celestra Grey
Celestra Grey to #99A7AB: rgb(153 167 171), hsl(193 10% 64%), oklch(0.719 0.017 216.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Celestra Grey color name →
#99A7AB
oklch(0.719 0.017 216.7)
Konwersje koloru
- HEX
- #99a7ab
- RGB
- rgb(153 167 171)
- HSL
- hsl(193 10% 64%)
- HWB
- hwb(193 60% 33%)
- OKLCH
- oklch(0.719 0.017 216.7)
- OKLab
- oklab(0.719 -0.014 -0.01)
- CIE Lab
- lab(67.47 -4.49 -3.85)
- LCH
- lch(67.47 5.91 220.6)
- CMYK
- cmyk(11% 2% 0% 33%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A3AFB3
- ADB8BB
- B7C1C4
- C1C9CC
- CBD2D4
- D5DBDD
- E0E4E5
- EAEDEE
- F4F6F6
Odcienie ciemniejsze
- 849194
- 707B7E
- 5D6668
- 4A5254
- 383E40
- 272C2D
- 171A1B
- 080A0B
- 010101
Tony
- 96A3A7
- 949FA2
- 919B9E
- 8F979A
- 8C9395
- 8A8F91
- 878C8D
- 858888
- 828484
Harmonie kolorów
Komplementarna +180°
- 99A7AB
Celestra Grey
- AEA19D
≈ Violet Vista
Analogowa -30° +30°
- 99A7AB
Celestra Grey
- 99A8A6
≈ Oily Steel
- 9CA5AE
≈ Rainmaster
Triada +120° +240°
- 99A7AB
Celestra Grey
- ABA0A8
≈ Mysterious Mauve
- A7A499
≈ Downing Stone
Komplementarna rozszczepiona +150° +210°
- 99A7AB
Celestra Grey
- AEA0A2
≈ Violet Vista
- ACA299
≈ Functional Grey
Tetrada +90° +180° +270°
- 99A7AB
Celestra Grey
- A7A2AD
≈ Luxe Lilac
- AEA19D
≈ Violet Vista
- A1A69B
≈ Strong Winds
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.47:1 · APCA Lc 49
Ag
AAANa czerni
WCAG 8.47:1 · APCA Lc 53
Najlepszy kolor tekstu: #000000
WCAG 8.47:1 (AAA) · APCA Lc 53
Contrast pairs
Fragmenty kodu
CSS
:root {
--celestra-grey: #99a7ab;
--celestra-grey-rgb: 153 167 171;
--celestra-grey-oklch: oklch(0.719 0.017 216.7);
}
.element {
color: var(--celestra-grey);
background-color: hsl(193 10% 64%);
border-color: oklch(0.719 0.017 216.7);
}Tailwind CSS v4
@theme {
--color-celestra-grey: #99a7ab;
--color-celestra-grey-50: #f0f6f8;
--color-celestra-grey-100: #e2e9ec;
--color-celestra-grey-200: #cdd6d9;
--color-celestra-grey-300: #aebabd;
--color-celestra-grey-400: #94a1a5;
--color-celestra-grey-500: #7a898d;
--color-celestra-grey-600: #687478;
--color-celestra-grey-700: #535d60;
--color-celestra-grey-800: #3c4446;
--color-celestra-grey-900: #292f30;
--color-celestra-grey-950: #171b1d;
}SCSS
$celestra-grey: #99a7ab;
$celestra-grey-rgb: 153, 167, 171;
$celestra-grey-light: mix(#fff, $celestra-grey, 20%);
$celestra-grey-dark: mix(#000, $celestra-grey, 20%);
.element {
color: $celestra-grey;
box-shadow: 0 0 0 2px rgba($celestra-grey, 0.35);
}