Adlandırılmış renk · #9BACD8
Aster Flower Blue
Aster Flower Blue, #9BACD8: rgb(155 172 216), hsl(223 44% 73%), oklch(0.747 0.067 268.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Aster Flower Blue color name →
#9BACD8
oklch(0.747 0.067 268.3)
Renk dönüşümleri
- HEX
- #9bacd8
- RGB
- rgb(155 172 216)
- HSL
- hsl(223 44% 73%)
- HWB
- hwb(223 61% 15%)
- OKLCH
- oklch(0.747 0.067 268.3)
- OKLab
- oklab(0.747 -0.002 -0.067)
- CIE Lab
- lab(70.2 1.38 -24.49)
- LCH
- lch(70.2 24.53 273.2)
- CMYK
- cmyk(28% 20% 0% 15%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A5B4DC
- AEBCE0
- B8C5E4
- C2CDE8
- CCD5EC
- D6DDF0
- E0E6F4
- EAEEF8
- F5F7FB
Koyu tonlar
- 8695BC
- 727FA0
- 5E6985
- 4B546B
- 394053
- 282D3B
- 181B25
- 090B11
- 010102
Gri tonlar
- 98A8CF
- 96A3C6
- 939FBD
- 909AB4
- 8D96AB
- 8B92A3
- 888D9A
- 858991
- 838489
Renk uyumları
Tamamlayıcı +180°
- 9BACD8
Aster Flower Blue
- BEAB7C
≈ Nettle
Analog -30° +30°
- 9BACD8
Aster Flower Blue
- 86B4D3
≈ Blue Cuddle
- B2A4D2
≈ Ariel’s Delight
Üçlü +120° +240°
- 9BACD8
Aster Flower Blue
- D49D95
≈ Savoury Salmon
- 91B996
≈ Brookview
Bölünmüş tamamlayıcı +150° +210°
- 9BACD8
Aster Flower Blue
- CEA383
≈ Kamut
- A9B383
≈ Great Green
Dörtlü +90° +180° +270°
- 9BACD8
Aster Flower Blue
- D19CAC
≈ Pink Ice
- BEAB7C
≈ Nettle
- 7EBBAD
≈ Mintnight
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.26:1 · APCA Lc 45
Ag
AAASiyah üzerinde
WCAG 9.28:1 · APCA Lc 58
En iyi metin rengi: #000000
WCAG 9.28:1 (AAA) · APCA Lc 58
Contrast pairs
Kod parçacıkları
CSS
:root {
--aster-flower-blue: #9bacd8;
--aster-flower-blue-rgb: 155 172 216;
--aster-flower-blue-oklch: oklch(0.747 0.067 268.3);
}
.element {
color: var(--aster-flower-blue);
background-color: hsl(223 44% 73%);
border-color: oklch(0.747 0.067 268.3);
}Tailwind CSS v4
@theme {
--color-aster-flower-blue: #9bacd8;
--color-aster-flower-blue-50: #eef5ff;
--color-aster-flower-blue-100: #dfe7ff;
--color-aster-flower-blue-200: #c9d4f2;
--color-aster-flower-blue-300: #aab6da;
--color-aster-flower-blue-400: #8e9ec7;
--color-aster-flower-blue-500: #7385b3;
--color-aster-flower-blue-600: #627097;
--color-aster-flower-blue-700: #4e5a79;
--color-aster-flower-blue-800: #38425a;
--color-aster-flower-blue-900: #262d3f;
--color-aster-flower-blue-950: #141a28;
}SCSS
$aster-flower-blue: #9bacd8;
$aster-flower-blue-rgb: 155, 172, 216;
$aster-flower-blue-light: mix(#fff, $aster-flower-blue, 20%);
$aster-flower-blue-dark: mix(#000, $aster-flower-blue, 20%);
.element {
color: $aster-flower-blue;
box-shadow: 0 0 0 2px rgba($aster-flower-blue, 0.35);
}