最接近的命名颜色 · #246AF9
#246AF9
最接近的命名颜色: Blue Ribbon
#246AF9（rgb(36 106 249)、hsl(220 95% 56%)、oklch(0.571 0.225 262.3)）最接近命名颜色 Blue Ribbon。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#246AF9
oklch(0.571 0.225 262.3)
颜色转换
- HEX
- #246af9
- RGB
- rgb(36 106 249)
- HSL
- hsl(220 95% 56%)
- HWB
- hwb(220 14% 2%)
- OKLCH
- oklch(0.571 0.225 262.3)
- OKLab
- oklab(0.571 -0.03 -0.223)
- CIE Lab
- lab(47.58 21.29 -78.87)
- LCH
- lch(47.58 81.69 285.1)
- CMYK
- cmyk(86% 57% 0% 2%)
浅色调 · 深色调 · 灰色调
浅色调
- 3C7BFB
- 528CFE
- 679BFF
- 7DAAFF
- 92B9FF
- A7C7FF
- BDD5FF
- D3E3FF
- E9F1FF
深色调
- 1E5BD9
- 184DB9
- 123F9A
- 0C317D
- 072461
- 041846
- 020D2C
- 000415
- 000003
灰色调
- 306FED
- 3B72E2
- 4476D6
- 4E78CA
- 577BBE
- 5F7CB2
- 687EA6
- 707F9A
- 78808D
配色和谐
互补色 +180°
- 246AF9
Blue Ribbon
- 9A6F00
≈ Sandy Taupe
类似色 -30° +30°
- 246AF9
Blue Ribbon
- 0082B0
≈ Tusche Blue
- 814FED
≈ Candy Grape Fizz
三角配色 +120° +240°
- 246AF9
Blue Ribbon
- DD0F33
≈ Rare Red
- 069100
≈ Maniac Green
分裂互补色 +150° +210°
- 246AF9
Blue Ribbon
- B85900
≈ Obscure Orange
- 7A7E00
≈ Verde Tropa
四角配色 +90° +180° +270°
- 246AF9
Blue Ribbon
- D01985
≈ Purple Heart Kiwi
- 9A6F00
≈ Sandy Taupe
- 008C70
≈ Carolina Green
对比度与无障碍
Ag
AA白底
WCAG 4.66:1 · APCA Lc 72
Ag
AA黑底
WCAG 4.50:1 · APCA Lc 30
最佳文字颜色: #FFFFFF
WCAG 4.66:1 (AA) · APCA Lc 72
Contrast pairs
代码片段
CSS
:root {
--blue-ribbon: #246af9;
--blue-ribbon-rgb: 36 106 249;
--blue-ribbon-oklch: oklch(0.571 0.225 262.3);
}
.element {
color: var(--blue-ribbon);
background-color: hsl(220 95% 56%);
border-color: oklch(0.571 0.225 262.3);
}Tailwind CSS v4
@theme {
--color-blue-ribbon: #246af9;
--color-blue-ribbon-50: #d5f5ff;
--color-blue-ribbon-100: #c2e7ff;
--color-blue-ribbon-200: #a4d2ff;
--color-blue-ribbon-300: #7cb2ff;
--color-blue-ribbon-400: #5196ff;
--color-blue-ribbon-500: #2876ff;
--color-blue-ribbon-600: #2365eb;
--color-blue-ribbon-700: #1c51bd;
--color-blue-ribbon-800: #083c8e;
--color-blue-ribbon-900: #052965;
--color-blue-ribbon-950: #001646;
}SCSS
$blue-ribbon: #246af9;
$blue-ribbon-rgb: 36, 106, 249;
$blue-ribbon-light: mix(#fff, $blue-ribbon, 20%);
$blue-ribbon-dark: mix(#000, $blue-ribbon, 20%);
.element {
color: $blue-ribbon;
box-shadow: 0 0 0 2px rgba($blue-ribbon, 0.35);
}