命名颜色 · #DDCC33
Mustard on Toast
Mustard on Toast 即 #DDCC33：rgb(221 204 51)、hsl(54 71% 53%)、oklch(0.834 0.162 102.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Mustard on Toast color name →
#DDCC33
oklch(0.834 0.162 102.7)
颜色转换
- HEX
- #ddcc33
- RGB
- rgb(221 204 51)
- HSL
- hsl(54 71% 53%)
- HWB
- hwb(54 20% 13%)
- OKLCH
- oklch(0.834 0.162 102.7)
- OKLab
- oklab(0.834 -0.035 0.158)
- CIE Lab
- lab(81.61 -5.41 71.91)
- LCH
- lch(81.61 72.11 94.3)
- CMYK
- cmyk(0% 8% 77% 13%)
浅色调 · 深色调 · 灰色调
浅色调
- E0D153
- E3D76C
- E7DC81
- EAE195
- EDE7A8
- F1ECBA
- F4F1CC
- F8F5DD
- FBFAEE
深色调
- C0B12B
- A49723
- 887E1C
- 6E6514
- 554E0D
- 3D3707
- 262203
- 110F01
- 020200
灰色调
- D3C444
- C9BD51
- C0B55B
- B6AE63
- ADA66A
- A49F70
- 9B9775
- 928F79
- 89887D
配色和谐
互补色 +180°
- DDCC33
Mustard on Toast
- C0C2FF
≈ Light Periwinkle
类似色 -30° +30°
- DDCC33
Mustard on Toast
- FFB959
≈ Cape Jasmine
- 9FDF6B
≈ Last of Lettuce
三角配色 +120° +240°
- DDCC33
Mustard on Toast
- 68D9FF
≈ Athena Blue
- FFA9DE
≈ Fresh Gum
分裂互补色 +150° +210°
- DDCC33
Mustard on Toast
- A2CDFF
≈ Baby Blue
- E3B3FF
≈ Mauve
四角配色 +90° +180° +270°
- DDCC33
Mustard on Toast
- 00E5E2
≈ Bright Turquoise
- C0C2FF
≈ Light Periwinkle
- FFB0B8
≈ Poodle Skirt
对比度与无障碍
Ag
Fail白底
WCAG 1.64:1 · APCA Lc 28
Ag
AAA黑底
WCAG 12.75:1 · APCA Lc 74
最佳文字颜色: #000000
WCAG 12.75:1 (AAA) · APCA Lc 74
Contrast pairs
代码片段
CSS
:root {
--mustard-on-toast: #ddcc33;
--mustard-on-toast-rgb: 221 204 51;
--mustard-on-toast-oklch: oklch(0.834 0.162 102.7);
}
.element {
color: var(--mustard-on-toast);
background-color: hsl(54 71% 53%);
border-color: oklch(0.834 0.162 102.7);
}Tailwind CSS v4
@theme {
--color-mustard-on-toast: #ddcc33;
--color-mustard-on-toast-50: #fcf8c3;
--color-mustard-on-toast-100: #f0ecad;
--color-mustard-on-toast-200: #dfd885;
--color-mustard-on-toast-300: #c4bc50;
--color-mustard-on-toast-400: #b1a100;
--color-mustard-on-toast-500: #9c8700;
--color-mustard-on-toast-600: #847300;
--color-mustard-on-toast-700: #695c00;
--color-mustard-on-toast-800: #4f4200;
--color-mustard-on-toast-900: #372e00;
--color-mustard-on-toast-950: #221a00;
}SCSS
$mustard-on-toast: #ddcc33;
$mustard-on-toast-rgb: 221, 204, 51;
$mustard-on-toast-light: mix(#fff, $mustard-on-toast, 20%);
$mustard-on-toast-dark: mix(#000, $mustard-on-toast, 20%);
.element {
color: $mustard-on-toast;
box-shadow: 0 0 0 2px rgba($mustard-on-toast, 0.35);
}