Nazwany kolor · #A4DBE4
Light Bluish Water
Light Bluish Water to #A4DBE4: rgb(164 219 228), hsl(188 54% 77%), oklch(0.857 0.058 208.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Cyan mean? → · Light Bluish Water color name →
#A4DBE4
oklch(0.857 0.058 208.6)
Konwersje koloru
- HEX
- #a4dbe4
- RGB
- rgb(164 219 228)
- HSL
- hsl(188 54% 77%)
- HWB
- hwb(188 64% 11%)
- OKLCH
- oklch(0.857 0.058 208.6)
- OKLab
- oklab(0.857 -0.051 -0.028)
- CIE Lab
- lab(83.83 -16.74 -10.47)
- LCH
- lch(83.83 19.75 212)
- CMYK
- cmyk(28% 4% 0% 11%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- ADDFE7
- B7E2E9
- C0E6EC
- C9EAEF
- D2EDF2
- DBF1F4
- E4F4F7
- EDF8FA
- F6FBFC
Odcienie ciemniejsze
- 8EBEC6
- 79A2A9
- 64878D
- 506D72
- 3D5458
- 2B3C3F
- 1A2628
- 0A1112
- 010203
Tony
- A1D2DA
- 9DC8CF
- 9ABFC5
- 97B6BB
- 93ADB1
- 8FA3A7
- 8C9B9D
- 889293
- 84898A
Harmonie kolorów
Komplementarna +180°
- A4DBE4
Light Bluish Water
- F4C2BB
≈ Pink Hydrangea
Analogowa -30° +30°
- A4DBE4
Light Bluish Water
- A8DDD0
≈ Prism
- AED6F2
≈ Blue Rice
Triada +120° +240°
- A4DBE4
Light Bluish Water
- E6C3E3
≈ Prom Corsage
- DFCFA5
≈ Foothills
Komplementarna rozszczepiona +150° +210°
- A4DBE4
Light Bluish Water
- F1C1CF
≈ Azalea Flower
- EDC7AB
≈ Desert Sand
Tetrada +90° +180° +270°
- A4DBE4
Light Bluish Water
- D4C8F1
≈ Soap
- F4C2BB
≈ Pink Hydrangea
- CCD6AB
≈ Trailing Vine
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.51:1 · APCA Lc 24
Ag
AAANa czerni
WCAG 13.83:1 · APCA Lc 79
Najlepszy kolor tekstu: #000000
WCAG 13.83:1 (AAA) · APCA Lc 79
Contrast pairs
Fragmenty kodu
CSS
:root {
--light-bluish-water: #a4dbe4;
--light-bluish-water-rgb: 164 219 228;
--light-bluish-water-oklch: oklch(0.857 0.058 208.6);
}
.element {
color: var(--light-bluish-water);
background-color: hsl(188 54% 77%);
border-color: oklch(0.857 0.058 208.6);
}Tailwind CSS v4
@theme {
--color-light-bluish-water: #a4dbe4;
--color-light-bluish-water-50: #e3fafe;
--color-light-bluish-water-100: #d3eef3;
--color-light-bluish-water-200: #b9dbe2;
--color-light-bluish-water-300: #96c0c8;
--color-light-bluish-water-400: #76a8b1;
--color-light-bluish-water-500: #56919b;
--color-light-bluish-water-600: #497b83;
--color-light-bluish-water-700: #3a6269;
--color-light-bluish-water-800: #29484c;
--color-light-bluish-water-900: #1c3235;
--color-light-bluish-water-950: #0c1e20;
}SCSS
$light-bluish-water: #a4dbe4;
$light-bluish-water-rgb: 164, 219, 228;
$light-bluish-water-light: mix(#fff, $light-bluish-water, 20%);
$light-bluish-water-dark: mix(#000, $light-bluish-water, 20%);
.element {
color: $light-bluish-water;
box-shadow: 0 0 0 2px rgba($light-bluish-water, 0.35);
}