命名颜色 · #6487B0
Perfect Periwinkle
Perfect Periwinkle 即 #6487B0：rgb(100 135 176)、hsl(212 32% 54%)、oklch(0.613 0.074 252.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Perfect Periwinkle color name →
#6487B0
oklch(0.613 0.074 252.9)
颜色转换
- HEX
- #6487b0
- RGB
- rgb(100 135 176)
- HSL
- hsl(212 32% 54%)
- HWB
- hwb(212 39% 31%)
- OKLCH
- oklch(0.613 0.074 252.9)
- OKLab
- oklab(0.613 -0.022 -0.071)
- CIE Lab
- lab(54.9 -4.32 -25.9)
- LCH
- lch(54.9 26.25 260.5)
- CMYK
- cmyk(43% 23% 0% 31%)
浅色调 · 深色调 · 灰色调
浅色调
- 7393B8
- 829EC0
- 91AAC8
- A0B6D0
- AFC2D8
- BFCEE0
- CFDAE8
- DFE6EF
- EFF3F7
深色调
- 567599
- 486382
- 3B516C
- 2E4156
- 223142
- 16212E
- 0B131C
- 03060B
- 000101
灰色调
- 6786AB
- 6A86A7
- 6D85A2
- 70859D
- 738498
- 768394
- 78828F
- 7B828A
- 7D8185
配色和谐
互补色 +180°
- 6487B0
Perfect Periwinkle
- A07D51
≈ Fantan
类似色 -30° +30°
- 6487B0
Perfect Periwinkle
- 4E8EA5
≈ Aegean Sea
- 7D7FB0
≈ Astro Zinger
三角配色 +120° +240°
- 6487B0
Perfect Periwinkle
- AC7278
≈ French Marron
- 738E60
≈ Four Leaf Clover
分裂互补色 +150° +210°
- 6487B0
Perfect Periwinkle
- AA7660
≈ Clay Court
- 8C8651
≈ Dried Bay Leaf
四角配色 +90° +180° +270°
- 6487B0
Perfect Periwinkle
- A47290
≈ Poise
- A07D51
≈ Fantan
- 599277
≈ Deep Grass Green
对比度与无障碍
Ag
Fail白底
WCAG 3.72:1 · APCA Lc 65
Ag
AA黑底
WCAG 5.63:1 · APCA Lc 37
最佳文字颜色: #000000
WCAG 5.63:1 (AA) · APCA Lc 37
Contrast pairs
代码片段
CSS
:root {
--perfect-periwinkle: #6487b0;
--perfect-periwinkle-rgb: 100 135 176;
--perfect-periwinkle-oklch: oklch(0.613 0.074 252.9);
}
.element {
color: var(--perfect-periwinkle);
background-color: hsl(212 32% 54%);
border-color: oklch(0.613 0.074 252.9);
}Tailwind CSS v4
@theme {
--color-perfect-periwinkle: #6487b0;
--color-perfect-periwinkle-50: #e7f7ff;
--color-perfect-periwinkle-100: #d8eaff;
--color-perfect-periwinkle-200: #bfd6f4;
--color-perfect-periwinkle-300: #9ebadd;
--color-perfect-periwinkle-400: #7fa1ca;
--color-perfect-periwinkle-500: #6289b6;
--color-perfect-periwinkle-600: #54749a;
--color-perfect-periwinkle-700: #435d7c;
--color-perfect-periwinkle-800: #2f445b;
--color-perfect-periwinkle-900: #202f40;
--color-perfect-periwinkle-950: #0f1c29;
}SCSS
$perfect-periwinkle: #6487b0;
$perfect-periwinkle-rgb: 100, 135, 176;
$perfect-periwinkle-light: mix(#fff, $perfect-periwinkle, 20%);
$perfect-periwinkle-dark: mix(#000, $perfect-periwinkle, 20%);
.element {
color: $perfect-periwinkle;
box-shadow: 0 0 0 2px rgba($perfect-periwinkle, 0.35);
}