命名颜色 · #665C46
Stone Pine
Stone Pine 即 #665C46：rgb(102 92 70)、hsl(41 19% 34%)、oklch(0.478 0.036 86.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Brown mean? → · Stone Pine color name →
#665C46
oklch(0.478 0.036 86.4)
颜色转换
- HEX
- #665c46
- RGB
- rgb(102 92 70)
- HSL
- hsl(41 19% 34%)
- HWB
- hwb(41 27% 60%)
- OKLCH
- oklch(0.478 0.036 86.4)
- OKLab
- oklab(0.478 0.002 0.036)
- CIE Lab
- lab(39.58 1.39 14.26)
- LCH
- lch(39.58 14.33 84.4)
- CMYK
- cmyk(0% 10% 31% 60%)
浅色调 · 深色调 · 灰色调
浅色调
- 746B57
- 837A68
- 918A7A
- A09A8C
- AFAA9E
- BFBAB1
- CFCBC4
- DFDCD7
- EFEEEB
深色调
- 584F3C
- 4A4232
- 3C3628
- 2F2A1E
- 231F15
- 17140D
- 0C0A05
- 040302
- 000000
灰色调
- 69604C
- 6B6352
- 6E6757
- 706A5D
- 736E63
- 767169
- 78756E
- 7B7974
- 7D7C7A
配色和谐
互补色 +180°
- 665C46
Stone Pine
- 545D72
≈ Vintage Indigo
类似色 -30° +30°
- 665C46
Stone Pine
- 6D584A
≈ Arctic Tundra
- 5C6049
≈ Fresh Basil
三角配色 +120° +240°
- 665C46
Stone Pine
- 456367
≈ Wanderlust
- 685668
≈ Vintner
分裂互补色 +150° +210°
- 665C46
Stone Pine
- 4A616F
≈ Nostalgic Evening
- 5F596F
≈ Head Over Heels
四角配色 +90° +180° +270°
- 665C46
Stone Pine
- 47645C
≈ Pine Haven
- 545D72
≈ Vintage Indigo
- 6E555D
≈ Mocha Brown
对比度与无障碍
Ag
AA白底
WCAG 6.59:1 · APCA Lc 83
Ag
Fail黑底
WCAG 3.18:1 · APCA Lc 19
最佳文字颜色: #FFFFFF
WCAG 6.59:1 (AA) · APCA Lc 83
Contrast pairs
代码片段
CSS
:root {
--stone-pine: #665c46;
--stone-pine-rgb: 102 92 70;
--stone-pine-oklch: oklch(0.478 0.036 86.4);
}
.element {
color: var(--stone-pine);
background-color: hsl(41 19% 34%);
border-color: oklch(0.478 0.036 86.4);
}Tailwind CSS v4
@theme {
--color-stone-pine: #665c46;
--color-stone-pine-50: #f9f5ea;
--color-stone-pine-100: #ede7db;
--color-stone-pine-200: #dad4c3;
--color-stone-pine-300: #bfb7a3;
--color-stone-pine-400: #a89d87;
--color-stone-pine-500: #91856b;
--color-stone-pine-600: #7a715b;
--color-stone-pine-700: #625a49;
--color-stone-pine-800: #484234;
--color-stone-pine-900: #322d24;
--color-stone-pine-950: #1e1a13;
}SCSS
$stone-pine: #665c46;
$stone-pine-rgb: 102, 92, 70;
$stone-pine-light: mix(#fff, $stone-pine, 20%);
$stone-pine-dark: mix(#000, $stone-pine, 20%);
.element {
color: $stone-pine;
box-shadow: 0 0 0 2px rgba($stone-pine, 0.35);
}