命名颜色 · #D2813A
Phoenix Rising
Phoenix Rising 即 #D2813A：rgb(210 129 58)、hsl(28 63% 53%)、oklch(0.677 0.131 58.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Phoenix Rising color name →
#D2813A
oklch(0.677 0.131 58.7)
颜色转换
- HEX
- #d2813a
- RGB
- rgb(210 129 58)
- HSL
- hsl(28 63% 53%)
- HWB
- hwb(28 23% 18%)
- OKLCH
- oklch(0.677 0.131 58.7)
- OKLab
- oklab(0.677 0.068 0.112)
- CIE Lab
- lab(61.94 27.91 50.67)
- LCH
- lch(61.94 57.85 61.1)
- CMYK
- cmyk(0% 39% 72% 18%)
浅色调 · 深色调 · 灰色调
浅色调
- D78E51
- DD9B66
- E2A77A
- E7B48D
- EBC0A0
- F0CDB3
- F4D9C6
- F8E6D9
- FBF2EC
深色调
- B66F31
- 9B5E28
- 814E20
- 683E18
- 502E10
- 391F09
- 241204
- 100601
- 020100
灰色调
- CA8245
- C2824E
- BA8256
- B2825D
- AA8264
- A2826A
- 9A8270
- 918175
- 89817B
配色和谐
互补色 +180°
- D2813A
Phoenix Rising
- 36A1DF
≈ Dayflower
类似色 -30° +30°
- D2813A
Phoenix Rising
- DC7568
≈ Mettwurst
- B8921C
≈ Faint Gold
三角配色 +120° +240°
- D2813A
Phoenix Rising
- 00B098
≈ Pool Green
- A284DD
≈ Lavender Blossom
分裂互补色 +150° +210°
- D2813A
Phoenix Rising
- 00AABD
≈ Bahaman Sea
- 7692E8
≈ Guilliman Blue
四角配色 +90° +180° +270°
- D2813A
Phoenix Rising
- 57AD69
≈ Algae
- 36A1DF
≈ Dayflower
- C378BF
≈ Gulābī Pink
对比度与无障碍
Ag
Fail白底
WCAG 3.02:1 · APCA Lc 57
Ag
AA黑底
WCAG 6.94:1 · APCA Lc 45
最佳文字颜色: #000000
WCAG 6.94:1 (AA) · APCA Lc 45
Contrast pairs
代码片段
CSS
:root {
--phoenix-rising: #d2813a;
--phoenix-rising-rgb: 210 129 58;
--phoenix-rising-oklch: oklch(0.677 0.131 58.7);
}
.element {
color: var(--phoenix-rising);
background-color: hsl(28 63% 53%);
border-color: oklch(0.677 0.131 58.7);
}Tailwind CSS v4
@theme {
--color-phoenix-rising: #d2813a;
--color-phoenix-rising-50: #ffedd0;
--color-phoenix-rising-100: #ffdfbc;
--color-phoenix-rising-200: #fec89b;
--color-phoenix-rising-300: #e9a870;
--color-phoenix-rising-400: #d78a48;
--color-phoenix-rising-500: #c46c0b;
--color-phoenix-rising-600: #a65c11;
--color-phoenix-rising-700: #854a0e;
--color-phoenix-rising-800: #64350a;
--color-phoenix-rising-900: #462406;
--color-phoenix-rising-950: #2d1200;
}SCSS
$phoenix-rising: #d2813a;
$phoenix-rising-rgb: 210, 129, 58;
$phoenix-rising-light: mix(#fff, $phoenix-rising, 20%);
$phoenix-rising-dark: mix(#000, $phoenix-rising, 20%);
.element {
color: $phoenix-rising;
box-shadow: 0 0 0 2px rgba($phoenix-rising, 0.35);
}