Named color · #A4DDED
Non-Photo Blue
Non-Photo Blue is #A4DDED: rgb(164 221 237), hsl(193 67% 79%), oklch(0.864 0.062 217). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Non-Photo Blue color name →
#A4DDED
oklch(0.864 0.062 217)
Color conversions
- HEX
- #a4dded
- RGB
- rgb(164 221 237)
- HSL
- hsl(193 67% 79%)
- HWB
- hwb(193 64% 7%)
- OKLCH
- oklch(0.864 0.062 217)
- OKLab
- oklab(0.864 -0.05 -0.037)
- CIE Lab
- lab(84.6 -16.09 -14.07)
- LCH
- lch(84.6 21.38 221.2)
- CMYK
- cmyk(31% 7% 0% 7%)
Tints · Shades · Tones
Tints
- AEE0EF
- B7E4F1
- C0E7F3
- C9EBF4
- D2EEF6
- DBF2F8
- E4F5FA
- EDF8FC
- F6FCFD
Shades
- 8EC0CE
- 79A4B0
- 648893
- 506E77
- 3D555C
- 2B3D42
- 1A262A
- 0A1114
- 010203
Tones
- A1D3E2
- 9ECAD6
- 9AC0CB
- 97B7C0
- 93AEB5
- 90A4AA
- 8C9BA0
- 889295
- 84898A
Color harmonies
Complementary +180°
- A4DDED
Non-Photo Blue
- F8C5B6
≈ Apricot Obsession
Analogous -30° +30°
- A4DDED
Non-Photo Blue
- A4E0D9
≈ Spinnaker
- B2D7FA
≈ Blue Rice
Triadic +120° +240°
- A4DDED
Non-Photo Blue
- EEC3E1
≈ Rosy Nectar
- DDD3A5
≈ Summer Solstice
Split-complementary +150° +210°
- A4DDED
Non-Photo Blue
- F7C2CB
≈ Deco Pink
- EFCBA7
≈ Masala Chai
Tetradic +90° +180° +270°
- A4DDED
Non-Photo Blue
- DDC8F3
≈ Foggy Heath
- F8C5B6
≈ Apricot Obsession
- C7DAAF
≈ White Vienna
Contrast & accessibility
Ag
FailOn white
WCAG 1.48:1 · APCA Lc 23
Ag
AAAOn black
WCAG 14.14:1 · APCA Lc 80
Best text color: #000000
WCAG 14.14:1 (AAA) · APCA Lc 80
Contrast pairs
Code snippets
CSS
:root {
--non-photo-blue: #a4dded;
--non-photo-blue-rgb: 164 221 237;
--non-photo-blue-oklch: oklch(0.864 0.062 217);
}
.element {
color: var(--non-photo-blue);
background-color: hsl(193 67% 79%);
border-color: oklch(0.864 0.062 217);
}Tailwind CSS v4
@theme {
--color-non-photo-blue: #a4dded;
--color-non-photo-blue-50: #e3faff;
--color-non-photo-blue-100: #d2edf6;
--color-non-photo-blue-200: #b8dbe6;
--color-non-photo-blue-300: #94c0cd;
--color-non-photo-blue-400: #74a8b6;
--color-non-photo-blue-500: #5391a1;
--color-non-photo-blue-600: #477a88;
--color-non-photo-blue-700: #38626d;
--color-non-photo-blue-800: #274850;
--color-non-photo-blue-900: #1a3238;
--color-non-photo-blue-950: #0b1e22;
}SCSS
$non-photo-blue: #a4dded;
$non-photo-blue-rgb: 164, 221, 237;
$non-photo-blue-light: mix(#fff, $non-photo-blue, 20%);
$non-photo-blue-dark: mix(#000, $non-photo-blue, 20%);
.element {
color: $non-photo-blue;
box-shadow: 0 0 0 2px rgba($non-photo-blue, 0.35);
}