Adlandırılmış renk · #9BA9AB
Mission Bay Blue
Mission Bay Blue, #9BA9AB: rgb(155 169 171), hsl(187 9% 64%), oklch(0.724 0.016 207.1). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Mission Bay Blue color name →
#9BA9AB
oklch(0.724 0.016 207.1)
Renk dönüşümleri
- HEX
- #9ba9ab
- RGB
- rgb(155 169 171)
- HSL
- hsl(187 9% 64%)
- HWB
- hwb(187 61% 33%)
- OKLCH
- oklch(0.724 0.016 207.1)
- OKLab
- oklab(0.724 -0.014 -0.007)
- CIE Lab
- lab(68.17 -4.79 -2.81)
- LCH
- lch(68.17 5.55 210.4)
- CMYK
- cmyk(9% 1% 0% 33%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A5B1B3
- AEBABB
- B8C2C4
- C2CBCC
- CCD3D4
- D6DCDD
- E0E5E5
- EAEDEE
- F5F6F6
Koyu tonlar
- 869294
- 727C7E
- 5E6768
- 4B5354
- 393F40
- 282C2D
- 181B1B
- 090A0B
- 010101
Gri tonlar
- 98A5A7
- 96A1A2
- 939C9E
- 90989A
- 8D9495
- 8B9091
- 888C8D
- 858888
- 838484
Renk uyumları
Tamamlayıcı +180°
- 9BA9AB
Mission Bay Blue
- B0A2A0
≈ Flexible Grey
Analog -30° +30°
- 9BA9AB
Mission Bay Blue
- 9CA9A6
≈ Horizon Grey
- 9DA8AF
≈ Seryi Grey
Üçlü +120° +240°
- 9BA9AB
Mission Bay Blue
- ACA3AB
≈ Mysterious Mauve
- AAA69B
≈ Tornado Watch
Bölünmüş tamamlayıcı +150° +210°
- 9BA9AB
Mission Bay Blue
- AFA2A6
≈ Flexible Grey
- AEA49C
≈ Warm Grey Flannel
Dörtlü +90° +180° +270°
- 9BA9AB
Mission Bay Blue
- A7A4AF
≈ Luxe Lilac
- B0A2A0
≈ Flexible Grey
- A5A79C
≈ Rare Grey
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.42:1 · APCA Lc 48
Ag
AAASiyah üzerinde
WCAG 8.65:1 · APCA Lc 54
En iyi metin rengi: #000000
WCAG 8.65:1 (AAA) · APCA Lc 54
Contrast pairs
Kod parçacıkları
CSS
:root {
--mission-bay-blue: #9ba9ab;
--mission-bay-blue-rgb: 155 169 171;
--mission-bay-blue-oklch: oklch(0.724 0.016 207.1);
}
.element {
color: var(--mission-bay-blue);
background-color: hsl(187 9% 64%);
border-color: oklch(0.724 0.016 207.1);
}Tailwind CSS v4
@theme {
--color-mission-bay-blue: #9ba9ab;
--color-mission-bay-blue-50: #f0f6f7;
--color-mission-bay-blue-100: #e2e9eb;
--color-mission-bay-blue-200: #cdd6d8;
--color-mission-bay-blue-300: #afbabc;
--color-mission-bay-blue-400: #94a1a3;
--color-mission-bay-blue-500: #7a898c;
--color-mission-bay-blue-600: #687476;
--color-mission-bay-blue-700: #535d5e;
--color-mission-bay-blue-800: #3c4445;
--color-mission-bay-blue-900: #292f30;
--color-mission-bay-blue-950: #171c1c;
}SCSS
$mission-bay-blue: #9ba9ab;
$mission-bay-blue-rgb: 155, 169, 171;
$mission-bay-blue-light: mix(#fff, $mission-bay-blue, 20%);
$mission-bay-blue-dark: mix(#000, $mission-bay-blue, 20%);
.element {
color: $mission-bay-blue;
box-shadow: 0 0 0 2px rgba($mission-bay-blue, 0.35);
}