Named color · #A5A8D6
Childish Wonder
Childish Wonder is #A5A8D6: rgb(165 168 214), hsl(236 37% 74%), oklch(0.745 0.066 281.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Childish Wonder color name →
#A5A8D6
oklch(0.745 0.066 281.7)
Color conversions
- HEX
- #a5a8d6
- RGB
- rgb(165 168 214)
- HSL
- hsl(236 37% 74%)
- HWB
- hwb(236 65% 16%)
- OKLCH
- oklch(0.745 0.066 281.7)
- OKLab
- oklab(0.745 0.013 -0.065)
- CIE Lab
- lab(69.84 6.32 -23.85)
- LCH
- lch(69.84 24.68 284.8)
- CMYK
- cmyk(23% 21% 0% 16%)
Tints · Shades · Tones
Tints
- AEB1DA
- B6B9DF
- BFC2E3
- C8CAE7
- D1D3EB
- DADCEF
- E3E4F3
- ECEDF7
- F6F6FB
Shades
- 8F92BA
- 797C9E
- 656784
- 51526A
- 3D3F52
- 2B2C3B
- 1A1A25
- 0A0A10
- 010102
Tones
- A1A4CD
- 9DA0C4
- 9A9CBC
- 9698B3
- 9294AA
- 8E90A2
- 8B8C99
- 878891
- 848488
Color harmonies
Complementary +180°
- A5A8D6
Childish Wonder
- B5AE7E
≈ Nettle
Analogous -30° +30°
- A5A8D6
Childish Wonder
- 8EB0D6
≈ Lazy Day
- BAA1CB
≈ Lucius Lilac
Triadic +120° +240°
- A5A8D6
Childish Wonder
- D29F8C
≈ Shiny Kettle
- 87BAA0
≈ Grand Gusto
Split-complementary +150° +210°
- A5A8D6
Childish Wonder
- C7A67E
≈ Sugar Pie
- 9DB68A
≈ Green Snow
Tetradic +90° +180° +270°
- A5A8D6
Childish Wonder
- D39CA1
≈ Rosewood Apricot
- B5AE7E
≈ Nettle
- 7ABAB7
≈ Polished Aqua
Contrast & accessibility
Ag
FailOn white
WCAG 2.28:1 · APCA Lc 45
Ag
AAAOn black
WCAG 9.17:1 · APCA Lc 57
Best text color: #000000
WCAG 9.17:1 (AAA) · APCA Lc 57
Contrast pairs
Code snippets
CSS
:root {
--childish-wonder: #a5a8d6;
--childish-wonder-rgb: 165 168 214;
--childish-wonder-oklch: oklch(0.745 0.066 281.7);
}
.element {
color: var(--childish-wonder);
background-color: hsl(236 37% 74%);
border-color: oklch(0.745 0.066 281.7);
}Tailwind CSS v4
@theme {
--color-childish-wonder: #a5a8d6;
--color-childish-wonder-50: #f2f3ff;
--color-childish-wonder-100: #e4e6fe;
--color-childish-wonder-200: #d0d1f0;
--color-childish-wonder-300: #b2b4d9;
--color-childish-wonder-400: #979ac5;
--color-childish-wonder-500: #7f81b1;
--color-childish-wonder-600: #6b6d96;
--color-childish-wonder-700: #565778;
--color-childish-wonder-800: #3e4059;
--color-childish-wonder-900: #2a2c3e;
--color-childish-wonder-950: #181928;
}SCSS
$childish-wonder: #a5a8d6;
$childish-wonder-rgb: 165, 168, 214;
$childish-wonder-light: mix(#fff, $childish-wonder, 20%);
$childish-wonder-dark: mix(#000, $childish-wonder, 20%);
.element {
color: $childish-wonder;
box-shadow: 0 0 0 2px rgba($childish-wonder, 0.35);
}