命名颜色 · #695D87
Kimberly
Kimberly 即 #695D87：rgb(105 93 135)、hsl(257 18% 45%)、oklch(0.507 0.067 297.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Kimberly color name →
#695D87
oklch(0.507 0.067 297.1)
颜色转换
- HEX
- #695d87
- RGB
- rgb(105 93 135)
- HSL
- hsl(257 18% 45%)
- HWB
- hwb(257 36% 47%)
- OKLCH
- oklch(0.507 0.067 297.1)
- OKLab
- oklab(0.507 0.03 -0.06)
- CIE Lab
- lab(41.94 12.08 -21.74)
- LCH
- lch(41.94 24.87 299)
- CMYK
- cmyk(22% 31% 0% 47%)
浅色调 · 深色调 · 灰色调
浅色调
- 776C93
- 857B9E
- 938BAA
- A29BB6
- B1ABC2
- C0BBCE
- CFCCDA
- DFDDE6
- EFEEF3
深色调
- 5A5075
- 4C4363
- 3E3751
- 312A41
- 241F31
- 181421
- 0C0A13
- 040306
- 000001
灰色调
- 6B6187
- 6D6486
- 706885
- 726B85
- 746F84
- 777283
- 797683
- 7B7982
- 7E7D81
配色和谐
互补色 +180°
- 695D87
Kimberly
- 626A3D
≈ Globe Artichoke
类似色 -30° +30°
- 695D87
Kimberly
- 54648C
≈ Dutch Blue
- 7A5779
≈ Dr Who
三角配色 +120° +240°
- 695D87
Kimberly
- 825B3E
≈ Potter’s Pot
- 357264
≈ Nordic Forest
分裂互补色 +150° +210°
- 695D87
Kimberly
- 766336
≈ Twig Basket
- 4B704F
≈ Fairway
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AA白底
WCAG 5.97:1 · APCA Lc 80
Ag
Fail黑底
WCAG 3.51:1 · APCA Lc 22
最佳文字颜色: #FFFFFF
WCAG 5.97:1 (AA) · APCA Lc 80
Contrast pairs
代码片段
CSS
:root {
--kimberly: #695d87;
--kimberly-rgb: 105 93 135;
--kimberly-oklch: oklch(0.507 0.067 297.1);
}
.element {
color: var(--kimberly);
background-color: hsl(257 18% 45%);
border-color: oklch(0.507 0.067 297.1);
}Tailwind CSS v4
@theme {
--color-kimberly: #695d87;
--color-kimberly-50: #f7f1ff;
--color-kimberly-100: #ebe3fc;
--color-kimberly-200: #d8ceee;
--color-kimberly-300: #bcb0d6;
--color-kimberly-400: #a297c2;
--color-kimberly-500: #8b7dae;
--color-kimberly-600: #756a93;
--color-kimberly-700: #5e5576;
--color-kimberly-800: #443e57;
--color-kimberly-900: #2f2b3d;
--color-kimberly-950: #1b1826;
}SCSS
$kimberly: #695d87;
$kimberly-rgb: 105, 93, 135;
$kimberly-light: mix(#fff, $kimberly, 20%);
$kimberly-dark: mix(#000, $kimberly, 20%);
.element {
color: $kimberly;
box-shadow: 0 0 0 2px rgba($kimberly, 0.35);
}