Adlandırılmış renk · #CBE1EE
Atlantic Breeze
Atlantic Breeze, #CBE1EE: rgb(203 225 238), hsl(202 51% 86%), oklch(0.897 0.03 233.6). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Atlantic Breeze color name →
#CBE1EE
oklch(0.897 0.03 233.6)
Renk dönüşümleri
- HEX
- #cbe1ee
- RGB
- rgb(203 225 238)
- HSL
- hsl(202 51% 86%)
- HWB
- hwb(202 80% 7%)
- OKLCH
- oklch(0.897 0.03 233.6)
- OKLab
- oklab(0.897 -0.017 -0.024)
- CIE Lab
- lab(88.18 -5.61 -8.98)
- LCH
- lch(88.18 10.59 238)
- CMYK
- cmyk(15% 5% 0% 7%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D0E4F0
- D5E7F1
- DBEAF3
- E0EDF5
- E5F0F7
- EAF3F8
- EFF6FA
- F5F9FC
- FAFCFD
Koyu tonlar
- B0C4CF
- 96A7B1
- 7D8B93
- 657077
- 4D565C
- 373E42
- 22272A
- 0F1214
- 020203
Gri tonlar
- C3D7E2
- BCCDD7
- B4C3CC
- ACB9C1
- A5AFB6
- 9DA6AB
- 969CA0
- 8F9395
- 87898A
Renk uyumları
Tamamlayıcı +180°
- CBE1EE
Atlantic Breeze
- EED8CB
≈ Peach Dust
Analog -30° +30°
- CBE1EE
Atlantic Breeze
- C8E3E6
≈ Babymoon Blue
- D3DEF1
≈ Puffy Cloud
Üçlü +120° +240°
- CBE1EE
Atlantic Breeze
- EED6DE
≈ Pineberry
- DDE0CA
≈ Sip of Mint
Bölünmüş tamamlayıcı +150° +210°
- CBE1EE
Atlantic Breeze
- F0D6D4
≈ French Bustle
- E7DCC8
≈ Half Spanish White
Dörtlü +90° +180° +270°
- CBE1EE
Atlantic Breeze
- E7D7E9
≈ Pale Grey Magenta
- EED8CB
≈ Peach Dust
- D2E3D1
≈ Sweet Mint Tea
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.35:1 · APCA Lc 17
Ag
AAASiyah üzerinde
WCAG 15.54:1 · APCA Lc 86
En iyi metin rengi: #000000
WCAG 15.54:1 (AAA) · APCA Lc 86
Contrast pairs
Kod parçacıkları
CSS
:root {
--atlantic-breeze: #cbe1ee;
--atlantic-breeze-rgb: 203 225 238;
--atlantic-breeze-oklch: oklch(0.897 0.03 233.6);
}
.element {
color: var(--atlantic-breeze);
background-color: hsl(202 51% 86%);
border-color: oklch(0.897 0.03 233.6);
}Tailwind CSS v4
@theme {
--color-atlantic-breeze: #cbe1ee;
--color-atlantic-breeze-50: #eef7fd;
--color-atlantic-breeze-100: #dfeaf1;
--color-atlantic-breeze-200: #c9d7df;
--color-atlantic-breeze-300: #aabac5;
--color-atlantic-breeze-400: #8ea2ad;
--color-atlantic-breeze-500: #748a97;
--color-atlantic-breeze-600: #627580;
--color-atlantic-breeze-700: #4e5d66;
--color-atlantic-breeze-800: #38444b;
--color-atlantic-breeze-900: #272f34;
--color-atlantic-breeze-950: #151c1f;
}SCSS
$atlantic-breeze: #cbe1ee;
$atlantic-breeze-rgb: 203, 225, 238;
$atlantic-breeze-light: mix(#fff, $atlantic-breeze, 20%);
$atlantic-breeze-dark: mix(#000, $atlantic-breeze, 20%);
.element {
color: $atlantic-breeze;
box-shadow: 0 0 0 2px rgba($atlantic-breeze, 0.35);
}