最接近的命名颜色 · #28A7FF
#28A7FF
最接近的命名颜色: Cerulean
#28A7FF（rgb(40 167 255)、hsl(205 100% 58%)、oklch(0.704 0.166 245.3)）最接近命名颜色 Cerulean。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#28A7FF
oklch(0.704 0.166 245.3)
颜色转换
- HEX
- #28a7ff
- RGB
- rgb(40 167 255)
- HSL
- hsl(205 100% 58%)
- HWB
- hwb(205 16% 0%)
- OKLCH
- oklch(0.704 0.166 245.3)
- OKLab
- oklab(0.704 -0.069 -0.151)
- CIE Lab
- lab(65.15 -10.55 -53.99)
- LCH
- lch(65.15 55.01 258.9)
- CMYK
- cmyk(84% 35% 0% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- 4AB1FF
- 63BAFF
- 79C3FF
- 8DCCFF
- A1D5FF
- B4DDFF
- C7E6FF
- DAEEFF
- EDF7FF
深色调
- 2191DE
- 1B7BBE
- 15669E
- 0F5280
- 093E63
- 042C48
- 021A2E
- 010A16
- 000103
灰色调
- 3BA4F2
- 48A0E5
- 539DD9
- 5C99CC
- 6495BF
- 6B91B3
- 718DA6
- 76899A
- 7B858D
配色和谐
互补色 +180°
- 28A7FF
Cerulean
- E18800
≈ Non-Stop Orange
类似色 -30° +30°
- 28A7FF
Cerulean
- 00B2D0
≈ Aquarius
- 8595FF
≈ Periwinkle Blue
三角配色 +120° +240°
- 28A7FF
Cerulean
- F26D91
≈ Out of Fashion
- 88B124
≈ Icky Green
分裂互补色 +150° +210°
- 28A7FF
Cerulean
- F47453
≈ Coral Rose
- BC9E00
≈ Perennial
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 2.60:1 · APCA Lc 50
Ag
AAA黑底
WCAG 8.06:1 · APCA Lc 52
最佳文字颜色: #000000
WCAG 8.06:1 (AAA) · APCA Lc 52
Contrast pairs
代码片段
CSS
:root {
--cerulean: #28a7ff;
--cerulean-rgb: 40 167 255;
--cerulean-oklch: oklch(0.704 0.166 245.3);
}
.element {
color: var(--cerulean);
background-color: hsl(205 100% 58%);
border-color: oklch(0.704 0.166 245.3);
}Tailwind CSS v4
@theme {
--color-cerulean: #28a7ff;
--color-cerulean-50: #d0fbff;
--color-cerulean-100: #bceeff;
--color-cerulean-200: #9adbff;
--color-cerulean-300: #6cbeff;
--color-cerulean-400: #33a6f9;
--color-cerulean-500: #008ceb;
--color-cerulean-600: #0076c6;
--color-cerulean-700: #005f9f;
--color-cerulean-800: #004676;
--color-cerulean-900: #003154;
--color-cerulean-950: #001c38;
}SCSS
$cerulean: #28a7ff;
$cerulean-rgb: 40, 167, 255;
$cerulean-light: mix(#fff, $cerulean, 20%);
$cerulean-dark: mix(#000, $cerulean, 20%);
.element {
color: $cerulean;
box-shadow: 0 0 0 2px rgba($cerulean, 0.35);
}