Adlandırılmış renk · #99A7AB
Celestra Grey
Celestra Grey, #99A7AB: rgb(153 167 171), hsl(193 10% 64%), oklch(0.719 0.017 216.7). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Celestra Grey color name →
#99A7AB
oklch(0.719 0.017 216.7)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A3AFB3
- ADB8BB
- B7C1C4
- C1C9CC
- CBD2D4
- D5DBDD
- E0E4E5
- EAEDEE
- F4F6F6
Koyu tonlar
- 849194
- 707B7E
- 5D6668
- 4A5254
- 383E40
- 272C2D
- 171A1B
- 080A0B
- 010101
Gri tonlar
- 96A3A7
- 949FA2
- 919B9E
- 8F979A
- 8C9395
- 8A8F91
- 878C8D
- 858888
- 828484
Renk uyumları
Tamamlayıcı +180°
- 99A7AB
Celestra Grey
- AEA19D
≈ Violet Vista
Analog -30° +30°
- 99A7AB
Celestra Grey
- 99A8A6
≈ Oily Steel
- 9CA5AE
≈ Rainmaster
Üçlü +120° +240°
- 99A7AB
Celestra Grey
- ABA0A8
≈ Mysterious Mauve
- A7A499
≈ Downing Stone
Bölünmüş tamamlayıcı +150° +210°
- 99A7AB
Celestra Grey
- AEA0A2
≈ Violet Vista
- ACA299
≈ Functional Grey
Dörtlü +90° +180° +270°
- 99A7AB
Celestra Grey
- A7A2AD
≈ Luxe Lilac
- AEA19D
≈ Violet Vista
- A1A69B
≈ Strong Winds
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.47:1 · APCA Lc 49
Ag
AAASiyah üzerinde
WCAG 8.47:1 · APCA Lc 53
En iyi metin rengi: #000000
WCAG 8.47:1 (AAA) · APCA Lc 53
Contrast pairs
Kod parçacıkları
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);
}