最接近的命名颜色 · #4973C5
#4973C5
最接近的命名颜色: Serenity’s Reign
#4973C5（rgb(73 115 197)、hsl(220 52% 53%)、oklch(0.565 0.136 262.4)）最接近命名颜色 Serenity’s Reign。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#4973C5
oklch(0.565 0.136 262.4)
颜色转换
- HEX
- #4973c5
- RGB
- rgb(73 115 197)
- HSL
- hsl(220 52% 53%)
- HWB
- hwb(220 29% 23%)
- OKLCH
- oklch(0.565 0.136 262.4)
- OKLab
- oklab(0.565 -0.018 -0.134)
- CIE Lab
- lab(48.46 5.23 -48.08)
- LCH
- lch(48.46 48.37 276.2)
- CMYK
- cmyk(63% 42% 0% 23%)
浅色调 · 深色调 · 灰色调
浅色调
- 5A81CC
- 6C8FD2
- 7D9DD8
- 8FABDF
- A1B9E4
- B3C7EA
- C6D5F0
- D9E3F5
- ECF1FA
深色调
- 3E63AB
- 345492
- 2A4579
- 203661
- 17284B
- 0E1B35
- 060F21
- 02050E
- 000102
灰色调
- 4F75BE
- 5577B8
- 5A78B1
- 607AAB
- 657BA4
- 6B7C9D
- 707E96
- 767E8F
- 7B7F88
配色和谐
互补色 +180°
- 4973C5
Serenity’s Reign
- 976E00
≈ Sandy Taupe
类似色 -30° +30°
- 4973C5
Serenity’s Reign
- 0080AE
≈ Turkish Blue
- 7964BE
≈ Ultra Violet
三角配色 +120° +240°
- 4973C5
Serenity’s Reign
- B85050
≈ Enticing Red
- 40893B
≈ Overgrown Mausoleum
分裂互补色 +150° +210°
- 4973C5
Serenity’s Reign
- B25B16
≈ Elm Brown Red
- 787D00
≈ Verde Tropa
四角配色 +90° +180° +270°
- 4973C5
Serenity’s Reign
- B0507E
≈ Signal Pink
- 976E00
≈ Sandy Taupe
- 008A6F
≈ Industrial Turquoise
对比度与无障碍
Ag
AA白底
WCAG 4.62:1 · APCA Lc 72
Ag
AA黑底
WCAG 4.54:1 · APCA Lc 30
最佳文字颜色: #FFFFFF
WCAG 4.62:1 (AA) · APCA Lc 72
Contrast pairs
代码片段
CSS
:root {
--serenity-s-reign: #4973c5;
--serenity-s-reign-rgb: 73 115 197;
--serenity-s-reign-oklch: oklch(0.565 0.136 262.4);
}
.element {
color: var(--serenity-s-reign);
background-color: hsl(220 52% 53%);
border-color: oklch(0.565 0.136 262.4);
}Tailwind CSS v4
@theme {
--color-serenity-s-reign: #4973c5;
--color-serenity-s-reign-50: #e2f6ff;
--color-serenity-s-reign-100: #d1e8ff;
--color-serenity-s-reign-200: #b7d4ff;
--color-serenity-s-reign-300: #95b6fd;
--color-serenity-s-reign-400: #729dee;
--color-serenity-s-reign-500: #5483df;
--color-serenity-s-reign-600: #476fbc;
--color-serenity-s-reign-700: #395997;
--color-serenity-s-reign-800: #264171;
--color-serenity-s-reign-900: #192d4f;
--color-serenity-s-reign-950: #0a1a35;
}SCSS
$serenity-s-reign: #4973c5;
$serenity-s-reign-rgb: 73, 115, 197;
$serenity-s-reign-light: mix(#fff, $serenity-s-reign, 20%);
$serenity-s-reign-dark: mix(#000, $serenity-s-reign, 20%);
.element {
color: $serenity-s-reign;
box-shadow: 0 0 0 2px rgba($serenity-s-reign, 0.35);
}