命名颜色 · #FFDD99
Butter Cupcake
Butter Cupcake 即 #FFDD99：rgb(255 221 153)、hsl(40 100% 80%)、oklch(0.911 0.093 84.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Butter Cupcake color name →
#FFDD99
oklch(0.911 0.093 84.1)
颜色转换
- HEX
- #ffdd99
- RGB
- rgb(255 221 153)
- HSL
- hsl(40 100% 80%)
- HWB
- hwb(40 60% 0%)
- OKLCH
- oklch(0.911 0.093 84.1)
- OKLab
- oklab(0.911 0.01 0.093)
- CIE Lab
- lab(89.87 5.56 37.97)
- LCH
- lch(89.87 38.37 81.7)
- CMYK
- cmyk(0% 13% 40% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- FFE1A4
- FFE4AF
- FFE8B9
- FFEBC3
- FFEECD
- FFF2D7
- FFF5E1
- FFF8EB
- FFFCF5
深色调
- DEC084
- BEA470
- 9E885D
- 806E4A
- 635538
- 483D27
- 2E2617
- 161108
- 030201
灰色调
- F2D397
- E4CA95
- D7C093
- CAB791
- BEAE8E
- B1A48C
- A59B89
- 989286
- 8C8983
配色和谐
互补色 +180°
- FFDD99
Butter Cupcake
- D3E2FF
≈ Contrail
类似色 -30° +30°
- FFDD99
Butter Cupcake
- FFD9C1
≈ Sun-Kissed Peach
- E0E9A1
≈ Wedge of Lime
三角配色 +120° +240°
- FFDD99
Butter Cupcake
- 92F4FE
≈ Shallow Water
- FCD1FF
≈ Pink Diamond
分裂互补色 +150° +210°
- FFDD99
Butter Cupcake
- C1E8FF
≈ Blue Java Banana
- E3DCFF
≈ Contrail
四角配色 +90° +180° +270°
- FFDD99
Butter Cupcake
- 9DF6DD
≈ Mintie
- D3E2FF
≈ Contrail
- FFD4E4
≈ Poplar Pink
对比度与无障碍
Ag
Fail白底
WCAG 1.30:1 · APCA Lc 15
Ag
AAA黑底
WCAG 16.05:1 · APCA Lc 89
最佳文字颜色: #000000
WCAG 16.05:1 (AAA) · APCA Lc 89
Contrast pairs
代码片段
CSS
:root {
--butter-cupcake: #ffdd99;
--butter-cupcake-rgb: 255 221 153;
--butter-cupcake-oklch: oklch(0.911 0.093 84.1);
}
.element {
color: var(--butter-cupcake);
background-color: hsl(40 100% 80%);
border-color: oklch(0.911 0.093 84.1);
}Tailwind CSS v4
@theme {
--color-butter-cupcake: #ffdd99;
--color-butter-cupcake-50: #fff4d8;
--color-butter-cupcake-100: #f6e6c5;
--color-butter-cupcake-200: #e6d2a7;
--color-butter-cupcake-300: #cdb580;
--color-butter-cupcake-400: #b89a5c;
--color-butter-cupcake-500: #a38034;
--color-butter-cupcake-600: #8a6d2e;
--color-butter-cupcake-700: #6f5724;
--color-butter-cupcake-800: #523f18;
--color-butter-cupcake-900: #392b10;
--color-butter-cupcake-950: #241903;
}SCSS
$butter-cupcake: #ffdd99;
$butter-cupcake-rgb: 255, 221, 153;
$butter-cupcake-light: mix(#fff, $butter-cupcake, 20%);
$butter-cupcake-dark: mix(#000, $butter-cupcake, 20%);
.element {
color: $butter-cupcake;
box-shadow: 0 0 0 2px rgba($butter-cupcake, 0.35);
}