命名颜色 · #531938
Tulip Poplar Purple
Tulip Poplar Purple 即 #531938：rgb(83 25 56)、hsl(328 54% 21%)、oklch(0.317 0.094 350.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Brown mean? → · Tulip Poplar Purple color name →
#531938
oklch(0.317 0.094 350.7)
颜色转换
- HEX
- #531938
- RGB
- rgb(83 25 56)
- HSL
- hsl(328 54% 21%)
- HWB
- hwb(328 10% 67%)
- OKLCH
- oklch(0.317 0.094 350.7)
- OKLab
- oklab(0.317 0.092 -0.015)
- CIE Lab
- lab(19.48 29.87 -5.37)
- LCH
- lch(19.48 30.35 349.8)
- CMYK
- cmyk(0% 70% 33% 67%)
浅色调 · 深色调 · 灰色调
浅色调
- 642F49
- 76445C
- 875A6E
- 987082
- A98695
- BA9DAA
- CBB5BE
- DCCDD3
- EEE6E9
深色调
- 47142F
- 3B1027
- 300B1F
- 250717
- 1B040F
- 110208
- 080104
- 020001
- 000000
灰色调
- 58243F
- 5E2F46
- 63394D
- 684354
- 6C4D5B
- 715762
- 756169
- 796B71
- 7C7678
配色和谐
互补色 +180°
- 531938
Tulip Poplar Purple
- 003C2D
≈ Deep Fir
类似色 -30° +30°
- 531938
Tulip Poplar Purple
- 471F4F
≈ Galactic Wonder
- 58181D
≈ Spinel Red
三角配色 +120° +240°
- 531938
Tulip Poplar Purple
- 343500
≈ Wasabi Nori
- 00374C
≈ Crowberry Blue
分裂互补色 +150° +210°
- 531938
Tulip Poplar Purple
- 113D08
≈ Hunter Green
- 003A3D
≈ Customs Green
四角配色 +90° +180° +270°
- 531938
Tulip Poplar Purple
- 432E00
≈ Hidden Passage
- 003C2D
≈ Deep Fir
- 143061
≈ Mythical Night
对比度与无障碍
Ag
AAA白底
WCAG 13.42:1 · APCA Lc 99
Ag
Fail黑底
WCAG 1.56:1 · APCA Lc 0
最佳文字颜色: #FFFFFF
WCAG 13.42:1 (AAA) · APCA Lc 99
Contrast pairs
代码片段
CSS
:root {
--tulip-poplar-purple: #531938;
--tulip-poplar-purple-rgb: 83 25 56;
--tulip-poplar-purple-oklch: oklch(0.317 0.094 350.7);
}
.element {
color: var(--tulip-poplar-purple);
background-color: hsl(328 54% 21%);
border-color: oklch(0.317 0.094 350.7);
}Tailwind CSS v4
@theme {
--color-tulip-poplar-purple: #531938;
--color-tulip-poplar-purple-50: #ffebf8;
--color-tulip-poplar-purple-100: #ffdceb;
--color-tulip-poplar-purple-200: #f5c4d8;
--color-tulip-poplar-purple-300: #dea4bc;
--color-tulip-poplar-purple-400: #c987a5;
--color-tulip-poplar-purple-500: #b56b8e;
--color-tulip-poplar-purple-600: #995b78;
--color-tulip-poplar-purple-700: #7b4960;
--color-tulip-poplar-purple-800: #5a3448;
--color-tulip-poplar-purple-900: #3f2432;
--color-tulip-poplar-purple-950: #28121e;
}SCSS
$tulip-poplar-purple: #531938;
$tulip-poplar-purple-rgb: 83, 25, 56;
$tulip-poplar-purple-light: mix(#fff, $tulip-poplar-purple, 20%);
$tulip-poplar-purple-dark: mix(#000, $tulip-poplar-purple, 20%);
.element {
color: $tulip-poplar-purple;
box-shadow: 0 0 0 2px rgba($tulip-poplar-purple, 0.35);
}