命名颜色 · #95A9CD
Hopeful Dream
Hopeful Dream 即 #95A9CD：rgb(149 169 205)、hsl(219 36% 69%)、oklch(0.732 0.057 262.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Hopeful Dream color name →
#95A9CD
oklch(0.732 0.057 262.1)
颜色转换
- HEX
- #95a9cd
- RGB
- rgb(149 169 205)
- HSL
- hsl(219 36% 69%)
- HWB
- hwb(219 58% 20%)
- OKLCH
- oklch(0.732 0.057 262.1)
- OKLab
- oklab(0.732 -0.008 -0.057)
- CIE Lab
- lab(68.63 -1.05 -20.89)
- LCH
- lch(68.63 20.92 267.1)
- CMYK
- cmyk(27% 18% 0% 20%)
浅色调 · 深色调 · 灰色调
浅色调
- 9FB1D2
- A9BAD7
- B4C2DC
- BECBE1
- C9D3E6
- D4DCEB
- DEE5F0
- E9EDF5
- F4F6FA
深色调
- 8192B2
- 6D7C98
- 5A677E
- 485366
- 373F4E
- 262C38
- 161B23
- 080A0F
- 010102
灰色调
- 93A5C5
- 91A1BD
- 8F9DB6
- 8D99AE
- 8B94A6
- 88909E
- 868C97
- 84888F
- 828488
配色和谐
互补色 +180°
- 95A9CD
Hopeful Dream
- BAA580
≈ Old Salem
类似色 -30° +30°
- 95A9CD
Hopeful Dream
- 84AFC6
≈ Resolute Blue
- A9A2CA
≈ Puturple
三角配色 +120° +240°
- 95A9CD
Hopeful Dream
- CA9B98
≈ Silk Stone
- 94B291
≈ Dew Green
分裂互补色 +150° +210°
- 95A9CD
Hopeful Dream
- C69F88
≈ Sweetwood
- A9AC83
≈ New Bamboo
四角配色 +90° +180° +270°
- 95A9CD
Hopeful Dream
- C69AAC
≈ Lady’s Cushions Pink
- BAA580
≈ Old Salem
- 84B4A4
≈ Le Max
对比度与无障碍
Ag
Fail白底
WCAG 2.37:1 · APCA Lc 47
Ag
AAA黑底
WCAG 8.83:1 · APCA Lc 55
最佳文字颜色: #000000
WCAG 8.83:1 (AAA) · APCA Lc 55
Contrast pairs
代码片段
CSS
:root {
--hopeful-dream: #95a9cd;
--hopeful-dream-rgb: 149 169 205;
--hopeful-dream-oklch: oklch(0.732 0.057 262.1);
}
.element {
color: var(--hopeful-dream);
background-color: hsl(219 36% 69%);
border-color: oklch(0.732 0.057 262.1);
}Tailwind CSS v4
@theme {
--color-hopeful-dream: #95a9cd;
--color-hopeful-dream-50: #edf5ff;
--color-hopeful-dream-100: #dee8fc;
--color-hopeful-dream-200: #c8d5ed;
--color-hopeful-dream-300: #a9b8d5;
--color-hopeful-dream-400: #8c9fc1;
--color-hopeful-dream-500: #7287ad;
--color-hopeful-dream-600: #607292;
--color-hopeful-dream-700: #4d5b75;
--color-hopeful-dream-800: #374356;
--color-hopeful-dream-900: #252e3c;
--color-hopeful-dream-950: #141b26;
}SCSS
$hopeful-dream: #95a9cd;
$hopeful-dream-rgb: 149, 169, 205;
$hopeful-dream-light: mix(#fff, $hopeful-dream, 20%);
$hopeful-dream-dark: mix(#000, $hopeful-dream, 20%);
.element {
color: $hopeful-dream;
box-shadow: 0 0 0 2px rgba($hopeful-dream, 0.35);
}