命名颜色 · #8F968B
Renegade
Renegade 即 #8F968B：rgb(143 150 139)、hsl(98 5% 57%)、oklch(0.664 0.018 133.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Renegade color name →
#8F968B
oklch(0.664 0.018 133.9)
颜色转换
- HEX
- #8f968b
- RGB
- rgb(143 150 139)
- HSL
- hsl(98 5% 57%)
- HWB
- hwb(98 55% 41%)
- OKLCH
- oklch(0.664 0.018 133.9)
- OKLab
- oklab(0.664 -0.012 0.013)
- CIE Lab
- lab(61.26 -4.21 4.9)
- LCH
- lch(61.26 6.46 130.7)
- CMYK
- cmyk(5% 0% 7% 41%)
浅色调 · 深色调 · 灰色调
浅色调
- 9AA096
- A4AAA1
- AFB4AC
- BABFB8
- C6C9C3
- D1D4CF
- DCDEDB
- E8E9E7
- F3F4F3
深色调
- 7C8278
- 696E66
- 575B54
- 454943
- 343732
- 242623
- 151614
- 070807
- 010101
灰色调
- 8D948A
- 8C9289
- 8A8F88
- 898D87
- 878B86
- 868984
- 848783
- 838482
- 818281
配色和谐
互补色 +180°
- 8F968B
Renegade
- 97909B
≈ Victorian
类似色 -30° +30°
- 8F968B
Renegade
- 959488
≈ Cornwall Slate
- 8A9790
≈ Deco Grey
三角配色 +120° +240°
- 8F968B
Renegade
- 8C949E
≈ Blue Dusk
- 9E8F90
≈ Autumn Orchid
分裂互补色 +150° +210°
- 8F968B
Renegade
- 92929E
≈ Lilac Fields
- 9C8F96
≈ Victorian
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 3.04:1 · APCA Lc 57
Ag
AA黑底
WCAG 6.90:1 · APCA Lc 45
最佳文字颜色: #000000
WCAG 6.90:1 (AA) · APCA Lc 45
Contrast pairs
代码片段
CSS
:root {
--renegade: #8f968b;
--renegade-rgb: 143 150 139;
--renegade-oklch: oklch(0.664 0.018 133.9);
}
.element {
color: var(--renegade);
background-color: hsl(98 5% 57%);
border-color: oklch(0.664 0.018 133.9);
}Tailwind CSS v4
@theme {
--color-renegade: #8f968b;
--color-renegade-50: #f3f6f1;
--color-renegade-100: #e5e9e3;
--color-renegade-200: #d1d6cf;
--color-renegade-300: #b3bab1;
--color-renegade-400: #9aa196;
--color-renegade-500: #81897d;
--color-renegade-600: #6e746a;
--color-renegade-700: #585d55;
--color-renegade-800: #40443d;
--color-renegade-900: #2c2f2a;
--color-renegade-950: #191b18;
}SCSS
$renegade: #8f968b;
$renegade-rgb: 143, 150, 139;
$renegade-light: mix(#fff, $renegade, 20%);
$renegade-dark: mix(#000, $renegade, 20%);
.element {
color: $renegade;
box-shadow: 0 0 0 2px rgba($renegade, 0.35);
}