Adlandırılmış renk · #A1C8DB
Piezo Blue
Piezo Blue, #A1C8DB: rgb(161 200 219), hsl(200 45% 75%), oklch(0.811 0.049 229.1). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Cyan mean? → · Piezo Blue color name →
#A1C8DB
oklch(0.811 0.049 229.1)
Renk dönüşümleri
- HEX
- #a1c8db
- RGB
- rgb(161 200 219)
- HSL
- hsl(200 45% 75%)
- HWB
- hwb(200 63% 14%)
- OKLCH
- oklch(0.811 0.049 229.1)
- OKLab
- oklab(0.811 -0.032 -0.037)
- CIE Lab
- lab(78.25 -10.18 -13.99)
- LCH
- lch(78.25 17.3 233.9)
- CMYK
- cmyk(26% 9% 0% 14%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- AACDDF
- B4D3E2
- BDD8E6
- C7DEE9
- D0E3ED
- D9E9F1
- E3EEF4
- ECF4F8
- F6F9FB
Koyu tonlar
- 8BAEBE
- 7694A2
- 627B87
- 4E636D
- 3C4C54
- 2A363C
- 192126
- 090F11
- 010202
Gri tonlar
- 9EC1D2
- 9BB9C8
- 98B2BF
- 94ABB6
- 91A3AD
- 8E9CA3
- 8A959A
- 878E92
- 838789
Renk uyumları
Tamamlayıcı +180°
- A1C8DB
Piezo Blue
- DDB9A6
≈ Coral Bay
Analog -30° +30°
- A1C8DB
Piezo Blue
- 9CCBCD
≈ Aqua Mist
- AEC3E2
≈ Simply Sparkling
Üçlü +120° +240°
- A1C8DB
Piezo Blue
- DBB5C6
≈ Kunzite
- C3C4A0
≈ Sage Splendour
Bölünmüş tamamlayıcı +150° +210°
- A1C8DB
Piezo Blue
- E0B5B5
≈ Cherry Tree
- D3BE9E
≈ Eire
Dörtlü +90° +180° +270°
- A1C8DB
Piezo Blue
- CFB8D6
≈ Pussyfoot
- DDB9A6
≈ Coral Bay
- B1C9AB
≈ Relish
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.77:1 · APCA Lc 33
Ag
AAASiyah üzerinde
WCAG 11.80:1 · APCA Lc 70
En iyi metin rengi: #000000
WCAG 11.80:1 (AAA) · APCA Lc 70
Contrast pairs
Kod parçacıkları
CSS
:root {
--piezo-blue: #a1c8db;
--piezo-blue-rgb: 161 200 219;
--piezo-blue-oklch: oklch(0.811 0.049 229.1);
}
.element {
color: var(--piezo-blue);
background-color: hsl(200 45% 75%);
border-color: oklch(0.811 0.049 229.1);
}Tailwind CSS v4
@theme {
--color-piezo-blue: #a1c8db;
--color-piezo-blue-50: #e8f8ff;
--color-piezo-blue-100: #d8ebf6;
--color-piezo-blue-200: #c0d9e6;
--color-piezo-blue-300: #9fbdcc;
--color-piezo-blue-400: #81a5b6;
--color-piezo-blue-500: #648da1;
--color-piezo-blue-600: #557788;
--color-piezo-blue-700: #435f6d;
--color-piezo-blue-800: #304650;
--color-piezo-blue-900: #203038;
--color-piezo-blue-950: #101d22;
}SCSS
$piezo-blue: #a1c8db;
$piezo-blue-rgb: 161, 200, 219;
$piezo-blue-light: mix(#fff, $piezo-blue, 20%);
$piezo-blue-dark: mix(#000, $piezo-blue, 20%);
.element {
color: $piezo-blue;
box-shadow: 0 0 0 2px rgba($piezo-blue, 0.35);
}