命名颜色 · #CC5522
Rusty Nail
Rusty Nail 即 #CC5522：rgb(204 85 34)、hsl(18 71% 47%)、oklch(0.596 0.163 41.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Rusty Nail color name →
#CC5522
oklch(0.596 0.163 41.1)
颜色转换
- HEX
- #cc5522
- RGB
- rgb(204 85 34)
- HSL
- hsl(18 71% 47%)
- HWB
- hwb(18 13% 20%)
- OKLCH
- oklch(0.596 0.163 41.1)
- OKLab
- oklab(0.596 0.123 0.107)
- CIE Lab
- lab(51.89 46.4 51.8)
- LCH
- lch(51.89 69.54 48.1)
- CMYK
- cmyk(0% 58% 83% 20%)
浅色调 · 深色调 · 灰色调
浅色调
- D3683E
- DA7955
- E08A6B
- E69B80
- EBAC95
- F0BDAA
- F5CDBF
- F9DED4
- FCEEE9
深色调
- B1491C
- 973D16
- 7E3111
- 65260B
- 4E1C07
- 371103
- 220801
- 0F0200
- 020000
灰色调
- C55B31
- BF613D
- B86647
- B16B50
- AA6F59
- A27361
- 9A7769
- 927A71
- 897D79
配色和谐
互补色 +180°
- CC5522
Rusty Nail
- 008DAD
≈ Algiers Blue
类似色 -30° +30°
- CC5522
Rusty Nail
- CD4C66
≈ California Wine
- AE7000
≈ Caramel
三角配色 +120° +240°
- CC5522
Rusty Nail
- 009765
≈ Green Cyan
- 716FDD
≈ C64 Purple
分裂互补色 +150° +210°
- CC5522
Rusty Nail
- 00928E
≈ Supermint
- 1A81DC
≈ Soothing Sapphire
四角配色 +90° +180° +270°
- CC5522
Rusty Nail
- 5B9100
≈ Vida Loca
- 008DAD
≈ Algiers Blue
- 9E5EC5
≈ Trunks Hair
对比度与无障碍
Ag
Fail白底
WCAG 4.29:1 · APCA Lc 69
Ag
AA黑底
WCAG 4.88:1 · APCA Lc 33
最佳文字颜色: #000000
WCAG 4.88:1 (AA) · APCA Lc 33
Contrast pairs
代码片段
CSS
:root {
--rusty-nail: #cc5522;
--rusty-nail-rgb: 204 85 34;
--rusty-nail-oklch: oklch(0.596 0.163 41.1);
}
.element {
color: var(--rusty-nail);
background-color: hsl(18 71% 47%);
border-color: oklch(0.596 0.163 41.1);
}Tailwind CSS v4
@theme {
--color-rusty-nail: #cc5522;
--color-rusty-nail-50: #ffe7d0;
--color-rusty-nail-100: #ffd7bd;
--color-rusty-nail-200: #ffbe9c;
--color-rusty-nail-300: #fd9a71;
--color-rusty-nail-400: #ed794c;
--color-rusty-nail-500: #db5618;
--color-rusty-nail-600: #b94a18;
--color-rusty-nail-700: #953b14;
--color-rusty-nail-800: #6f290f;
--color-rusty-nail-900: #4e1c09;
--color-rusty-nail-950: #340b00;
}SCSS
$rusty-nail: #cc5522;
$rusty-nail-rgb: 204, 85, 34;
$rusty-nail-light: mix(#fff, $rusty-nail, 20%);
$rusty-nail-dark: mix(#000, $rusty-nail, 20%);
.element {
color: $rusty-nail;
box-shadow: 0 0 0 2px rgba($rusty-nail, 0.35);
}