命名颜色 · #F16640
Opulent Orange
Opulent Orange 即 #F16640：rgb(241 102 64)、hsl(13 86% 60%)、oklch(0.678 0.18 36.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Opulent Orange color name →
#F16640
oklch(0.678 0.18 36.1)
颜色转换
- HEX
- #f16640
- RGB
- rgb(241 102 64)
- HSL
- hsl(13 86% 60%)
- HWB
- hwb(13 25% 5%)
- OKLCH
- oklch(0.678 0.18 36.1)
- OKLab
- oklab(0.678 0.145 0.106)
- CIE Lab
- lab(61.14 53.04 48.71)
- LCH
- lch(61.14 72.02 42.6)
- CMYK
- cmyk(0% 58% 73% 5%)
浅色调 · 深色调 · 灰色调
浅色调
- F57755
- F88869
- FB977C
- FDA78F
- FFB6A2
- FFC5B4
- FFD3C7
- FFE2D9
- FFF1EC
深色调
- D25836
- B34A2D
- 953C24
- 792F1B
- 5D2313
- 43170B
- 2B0C05
- 140401
- 030000
灰色调
- E76B49
- DC6F51
- D17258
- C6755F
- BB7865
- B07A6B
- A57C71
- 997E76
- 8D7F7B
配色和谐
互补色 +180°
- F16640
Opulent Orange
- 00A9C7
≈ Gummy Dolphins
类似色 -30° +30°
- F16640
Opulent Orange
- EE5F86
≈ Watermelon Juice
- D58100
≈ Dulce de Leche
三角配色 +120° +240°
- F16640
Opulent Orange
- 00B46B
≈ Green Mana
- 7D8AFF
≈ Lavender Blue Shadow
分裂互补色 +150° +210°
- F16640
Opulent Orange
- 00AFA3
≈ Cozumel
- 009EFC
≈ Blue Nebula
四角配色 +90° +180° +270°
- F16640
Opulent Orange
- 7DA900
≈ Green Envy
- 00A9C7
≈ Gummy Dolphins
- B475EE
≈ Queer Purple
对比度与无障碍
Ag
Fail白底
WCAG 3.12:1 · APCA Lc 58
Ag
AA黑底
WCAG 6.71:1 · APCA Lc 44
最佳文字颜色: #000000
WCAG 6.71:1 (AA) · APCA Lc 44
Contrast pairs
代码片段
CSS
:root {
--opulent-orange: #f16640;
--opulent-orange-rgb: 241 102 64;
--opulent-orange-oklch: oklch(0.678 0.18 36.1);
}
.element {
color: var(--opulent-orange);
background-color: hsl(13 86% 60%);
border-color: oklch(0.678 0.18 36.1);
}Tailwind CSS v4
@theme {
--color-opulent-orange: #f16640;
--color-opulent-orange-50: #ffe4d0;
--color-opulent-orange-100: #ffd4bd;
--color-opulent-orange-200: #ffb99c;
--color-opulent-orange-300: #ff9471;
--color-opulent-orange-400: #f5714d;
--color-opulent-orange-500: #e44a1b;
--color-opulent-orange-600: #c0401a;
--color-opulent-orange-700: #9b3315;
--color-opulent-orange-800: #742311;
--color-opulent-orange-900: #52180a;
--color-opulent-orange-950: #360701;
}SCSS
$opulent-orange: #f16640;
$opulent-orange-rgb: 241, 102, 64;
$opulent-orange-light: mix(#fff, $opulent-orange, 20%);
$opulent-orange-dark: mix(#000, $opulent-orange, 20%);
.element {
color: $opulent-orange;
box-shadow: 0 0 0 2px rgba($opulent-orange, 0.35);
}