色名 · #DFE1CC
Vintage Beige
Vintage Beigeは#DFE1CC：rgb(223 225 204)、hsl(66 26% 84%)、oklch(0.903 0.028 111.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Vintage Beige color name →
#DFE1CC
oklch(0.903 0.028 111.4)
カラー変換
- HEX
- #dfe1cc
- RGB
- rgb(223 225 204)
- HSL
- hsl(66 26% 84%)
- HWB
- hwb(66 80% 12%)
- OKLCH
- oklch(0.903 0.028 111.4)
- OKLab
- oklab(0.903 -0.01 0.026)
- CIE Lab
- lab(88.95 -3.39 10.07)
- LCH
- lch(88.95 10.63 108.6)
- CMYK
- cmyk(1% 0% 9% 12%)
ティント · シェード · トーン
ティント
- E2E4D1
- E5E7D6
- E8EADB
- ECEDE0
- EFF0E5
- F2F3EA
- F5F6F0
- F9F9F5
- FCFCFA
シェード
- C2C4B1
- A5A797
- 8A8B7E
- 6F7065
- 56564E
- 3D3E37
- 272722
- 12120F
- 020202
トーン
- D5D7C4
- CBCDBC
- C1C3B5
- B8B9AD
- AEAFA5
- A5A69E
- 9B9C96
- 92938F
- 898987
カラーハーモニー
補色 +180°
- DFE1CC
Vintage Beige
- DEDCF1
≈ Chinese Silver
類似色 -30° +30°
- DFE1CC
Vintage Beige
- E8DDCA
≈ Aged Parchment
- D5E4D3
≈ Light Mystified
トライアド +120° +240°
- DFE1CC
Vintage Beige
- CDE3EE
≈ Niagara Falls
- EFD8E1
≈ Rosa Bonito
スプリットコンプリメンタリー +150° +210°
- DFE1CC
Vintage Beige
- D5DFF2
≈ Puffy Cloud
- E8D9EA
≈ Pale Grey Magenta
テトラード +90° +180° +270°
- DFE1CC
Vintage Beige
- CAE5E7
≈ Wave Splash
- DEDCF1
≈ Chinese Silver
- F1D8D7
≈ Light Petite Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.33:1 · APCA Lc 16
Ag
AAA黒の上
WCAG 15.77:1 · APCA Lc 87
最適な文字色: #000000
WCAG 15.77:1 (AAA) · APCA Lc 87
Contrast pairs
コードスニペット
CSS
:root {
--vintage-beige: #dfe1cc;
--vintage-beige-rgb: 223 225 204;
--vintage-beige-oklch: oklch(0.903 0.028 111.4);
}
.element {
color: var(--vintage-beige);
background-color: hsl(66 26% 84%);
border-color: oklch(0.903 0.028 111.4);
}Tailwind CSS v4
@theme {
--color-vintage-beige: #dfe1cc;
--color-vintage-beige-50: #f5f6ed;
--color-vintage-beige-100: #e7e9df;
--color-vintage-beige-200: #d4d6c8;
--color-vintage-beige-300: #b7b9a9;
--color-vintage-beige-400: #9fa08e;
--color-vintage-beige-500: #868873;
--color-vintage-beige-600: #727362;
--color-vintage-beige-700: #5b5c4e;
--color-vintage-beige-800: #434338;
--color-vintage-beige-900: #2e2e26;
--color-vintage-beige-950: #1b1b15;
}SCSS
$vintage-beige: #dfe1cc;
$vintage-beige-rgb: 223, 225, 204;
$vintage-beige-light: mix(#fff, $vintage-beige, 20%);
$vintage-beige-dark: mix(#000, $vintage-beige, 20%);
.element {
color: $vintage-beige;
box-shadow: 0 0 0 2px rgba($vintage-beige, 0.35);
}