色名 · #DADED1
Sage Tint
Sage Tintは#DADED1：rgb(218 222 209)、hsl(78 16% 85%)、oklch(0.894 0.018 120.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Sage Tint color name →
#DADED1
oklch(0.894 0.018 120.7)
カラー変換
- HEX
- #daded1
- RGB
- rgb(218 222 209)
- HSL
- hsl(78 16% 85%)
- HWB
- hwb(78 82% 13%)
- OKLCH
- oklch(0.894 0.018 120.7)
- OKLab
- oklab(0.894 -0.009 0.015)
- CIE Lab
- lab(87.89 -3.12 5.9)
- LCH
- lch(87.89 6.68 117.8)
- CMYK
- cmyk(2% 0% 6% 13%)
ティント · シェード · トーン
ティント
- DEE1D6
- E1E5DA
- E5E8DF
- E9EBE3
- ECEEE8
- F0F2EC
- F4F5F1
- F8F8F6
- FBFCFA
シェード
- BDC1B5
- A2A59B
- 878981
- 6C6F68
- 545550
- 3C3D39
- 252623
- 111210
- 020202
トーン
- D1D4C9
- C7CAC0
- BEC1B8
- B5B7B0
- ACAEA8
- A3A4A0
- 9A9B98
- 919290
- 898988
カラーハーモニー
補色 +180°
- DADED1
Sage Tint
- DEDAE6
≈ Inspired Lilac
類似色 -30° +30°
- DADED1
Sage Tint
- E0DCCF
≈ Navy Bean
- D4E0D6
≈ Sentinel
トライアド +120° +240°
- DADED1
Sage Tint
- D2DEE7
≈ Nordic Breeze
- E7D7DB
≈ Diminished Red
スプリットコンプリメンタリー +150° +210°
- DADED1
Sage Tint
- D7DCE8
≈ Star Jasmine
- E3D8E2
≈ Wine Frost
テトラード +90° +180° +270°
- DADED1
Sage Tint
- CFE0E3
≈ Nymphaeaceae
- DEDAE6
≈ Inspired Lilac
- E8D8D5
≈ Ebb
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.36:1 · APCA Lc 18
Ag
AAA黒の上
WCAG 15.35:1 · APCA Lc 86
最適な文字色: #000000
WCAG 15.35:1 (AAA) · APCA Lc 86
Contrast pairs
コードスニペット
CSS
:root {
--sage-tint: #daded1;
--sage-tint-rgb: 218 222 209;
--sage-tint-oklch: oklch(0.894 0.018 120.7);
}
.element {
color: var(--sage-tint);
background-color: hsl(78 16% 85%);
border-color: oklch(0.894 0.018 120.7);
}Tailwind CSS v4
@theme {
--color-sage-tint: #daded1;
--color-sage-tint-50: #f4f6f0;
--color-sage-tint-100: #e7e9e2;
--color-sage-tint-200: #d3d6cd;
--color-sage-tint-300: #b5b9af;
--color-sage-tint-400: #9da095;
--color-sage-tint-500: #84887b;
--color-sage-tint-600: #707368;
--color-sage-tint-700: #595c53;
--color-sage-tint-800: #42433c;
--color-sage-tint-900: #2d2e29;
--color-sage-tint-950: #1a1b17;
}SCSS
$sage-tint: #daded1;
$sage-tint-rgb: 218, 222, 209;
$sage-tint-light: mix(#fff, $sage-tint, 20%);
$sage-tint-dark: mix(#000, $sage-tint, 20%);
.element {
color: $sage-tint;
box-shadow: 0 0 0 2px rgba($sage-tint, 0.35);
}