命名颜色 · #E1793A
Citrus Blast
Citrus Blast 即 #E1793A：rgb(225 121 58)、hsl(23 74% 55%)、oklch(0.683 0.15 49.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Citrus Blast color name →
#E1793A
oklch(0.683 0.15 49.1)
颜色转换
- HEX
- #e1793a
- RGB
- rgb(225 121 58)
- HSL
- hsl(23 74% 55%)
- HWB
- hwb(23 23% 12%)
- OKLCH
- oklch(0.683 0.15 49.1)
- OKLab
- oklab(0.683 0.098 0.113)
- CIE Lab
- lab(62.27 38.01 51.81)
- LCH
- lch(62.27 64.26 53.7)
- CMYK
- cmyk(0% 46% 74% 12%)
浅色调 · 深色调 · 灰色调
浅色调
- E58751
- EA9566
- EDA27A
- F1B08D
- F4BDA0
- F7CAB3
- FAD8C6
- FCE5D9
- FEF2EC
深色调
- C46831
- A75828
- 8B4820
- 703918
- 562B10
- 3E1D09
- 271004
- 120501
- 020100
灰色调
- D87B45
- CF7C4E
- C57D56
- BC7E5D
- B27F64
- A9806A
- 9F8070
- 958076
- 8B807B
配色和谐
互补色 +180°
- E1793A
Citrus Blast
- 00A7DB
≈ Malibu Blue
类似色 -30° +30°
- E1793A
Citrus Blast
- E76E74
≈ Froly
- C78D00
≈ Festering Brown
三角配色 +120° +240°
- E1793A
Citrus Blast
- 00B38B
≈ Chromophobia Green
- 9887EF
≈ Perrywinkle
分裂互补色 +150° +210°
- E1793A
Citrus Blast
- 00AEB4
≈ Larkspur Blue
- 5E98F4
≈ Guilliman Blue
四角配色 +90° +180° +270°
- E1793A
Citrus Blast
- 65AF50
≈ Barnyard Grass
- 00A7DB
≈ Malibu Blue
- C078D3
≈ Purple Kush
对比度与无障碍
Ag
Fail白底
WCAG 3.00:1 · APCA Lc 56
Ag
AA黑底
WCAG 6.99:1 · APCA Lc 46
最佳文字颜色: #000000
WCAG 6.99:1 (AA) · APCA Lc 46
Contrast pairs
代码片段
CSS
:root {
--citrus-blast: #e1793a;
--citrus-blast-rgb: 225 121 58;
--citrus-blast-oklch: oklch(0.683 0.15 49.1);
}
.element {
color: var(--citrus-blast);
background-color: hsl(23 74% 55%);
border-color: oklch(0.683 0.15 49.1);
}Tailwind CSS v4
@theme {
--color-citrus-blast: #e1793a;
--color-citrus-blast-50: #ffeacf;
--color-citrus-blast-100: #ffdabb;
--color-citrus-blast-200: #ffc29a;
--color-citrus-blast-300: #f4a06e;
--color-citrus-blast-400: #e48147;
--color-citrus-blast-500: #d16104;
--color-citrus-blast-600: #b1530d;
--color-citrus-blast-700: #8e420b;
--color-citrus-blast-800: #6a2e09;
--color-citrus-blast-900: #4b2006;
--color-citrus-blast-950: #310e00;
}SCSS
$citrus-blast: #e1793a;
$citrus-blast-rgb: 225, 121, 58;
$citrus-blast-light: mix(#fff, $citrus-blast, 20%);
$citrus-blast-dark: mix(#000, $citrus-blast, 20%);
.element {
color: $citrus-blast;
box-shadow: 0 0 0 2px rgba($citrus-blast, 0.35);
}