命名颜色 · #FFC69E
Romantic
Romantic 即 #FFC69E：rgb(255 198 158)、hsl(25 100% 81%)、oklch(0.868 0.084 56.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Romantic color name →
#FFC69E
oklch(0.868 0.084 56.4)
颜色转换
- HEX
- #ffc69e
- RGB
- rgb(255 198 158)
- HSL
- hsl(25 100% 81%)
- HWB
- hwb(25 62% 0%)
- OKLCH
- oklch(0.868 0.084 56.4)
- OKLab
- oklab(0.868 0.046 0.07)
- CIE Lab
- lab(84.38 17.21 28.31)
- LCH
- lch(84.38 33.13 58.7)
- CMYK
- cmyk(0% 22% 38% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- FFCCA8
- FFD2B2
- FFD7BB
- FFDDC5
- FFE3CF
- FFE8D8
- FFEEE2
- FFF4EC
- FFF9F5
深色调
- DEAC89
- BE9274
- 9E7A60
- 80624D
- 634B3A
- 483529
- 2E2118
- 160E09
- 030201
灰色调
- F2BF9B
- E5B899
- D8B196
- CBAA93
- BEA390
- B29C8D
- A5958A
- 998E87
- 8C8783
配色和谐
互补色 +180°
- FFC69E
Romantic
- A4DCFF
≈ Droplet
类似色 -30° +30°
- FFC69E
Romantic
- FFC2BB
≈ Impatiens Pink
- ECD093
≈ Honeydew Sand
三角配色 +120° +240°
- FFC69E
Romantic
- 96E6D2
≈ Neverland
- D8CAFF
≈ Foggy Heath
分裂互补色 +150° +210°
- FFC69E
Romantic
- 8EE4EF
≈ Aqua Fiesta
- C0D3FF
≈ Pale Phthalo Blue
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 1.51:1 · APCA Lc 24
Ag
AAA黑底
WCAG 13.82:1 · APCA Lc 79
最佳文字颜色: #000000
WCAG 13.82:1 (AAA) · APCA Lc 79
Contrast pairs
代码片段
CSS
:root {
--romantic: #ffc69e;
--romantic-rgb: 255 198 158;
--romantic-oklch: oklch(0.868 0.084 56.4);
}
.element {
color: var(--romantic);
background-color: hsl(25 100% 81%);
border-color: oklch(0.868 0.084 56.4);
}Tailwind CSS v4
@theme {
--color-romantic: #ffc69e;
--color-romantic-50: #fff0de;
--color-romantic-100: #fee2cd;
--color-romantic-200: #f0ccb1;
--color-romantic-300: #d9ad8d;
--color-romantic-400: #c5926d;
--color-romantic-500: #b1774d;
--color-romantic-600: #956542;
--color-romantic-700: #785134;
--color-romantic-800: #593a25;
--color-romantic-900: #3e2819;
--color-romantic-950: #27160a;
}SCSS
$romantic: #ffc69e;
$romantic-rgb: 255, 198, 158;
$romantic-light: mix(#fff, $romantic, 20%);
$romantic-dark: mix(#000, $romantic, 20%);
.element {
color: $romantic;
box-shadow: 0 0 0 2px rgba($romantic, 0.35);
}