色名 · #F0DCD7
Sweet Truffle
Sweet Truffleは#F0DCD7：rgb(240 220 215)、hsl(12 45% 89%)、oklch(0.909 0.023 34.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Sweet Truffle color name →
#F0DCD7
oklch(0.909 0.023 34.3)
カラー変換
- HEX
- #f0dcd7
- RGB
- rgb(240 220 215)
- HSL
- hsl(12 45% 89%)
- HWB
- hwb(12 84% 6%)
- OKLCH
- oklch(0.909 0.023 34.3)
- OKLab
- oklab(0.909 0.019 0.013)
- CIE Lab
- lab(89.31 6.5 5.08)
- LCH
- lch(89.31 8.25 38)
- CMYK
- cmyk(0% 8% 10% 6%)
ティント · シェード · トーン
ティント
- F2DFDB
- F3E3DF
- F5E6E3
- F6EAE7
- F8EDEB
- F9F1EF
- FBF4F3
- FCF8F7
- FEFBFB
シェード
- D1BFBB
- B2A39F
- 958885
- 786E6B
- 5D5452
- 433C3B
- 2A2625
- 141111
- 030202
トーン
- E4D2CE
- D9C9C5
- CDBFBC
- C2B6B3
- B6ADAA
- ABA4A2
- A09B99
- 959291
- 8B8988
カラーハーモニー
補色 +180°
- F0DCD7
Sweet Truffle
- D1E5EB
≈ Ocean Breeze
類似色 -30° +30°
- F0DCD7
Sweet Truffle
- F0DBDF
≈ Cupid’s Revenge
- ECDED2
≈ Santa Fe Spirit
トライアド +120° +240°
- F0DCD7
Sweet Truffle
- D6E6DA
≈ Light Green Wash
- DCE0F1
≈ Lower Lavender
スプリットコンプリメンタリー +150° +210°
- F0DCD7
Sweet Truffle
- D1E6E3
≈ Plateau
- D5E3F0
≈ Wind Force
テトラード +90° +180° +270°
- F0DCD7
Sweet Truffle
- DEE4D3
≈ Greening
- D1E5EB
≈ Ocean Breeze
- E4DEEE
≈ Lingering Lilac
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.31:1 · APCA Lc 16
Ag
AAA黒の上
WCAG 15.92:1 · APCA Lc 88
最適な文字色: #000000
WCAG 15.92:1 (AAA) · APCA Lc 88
Contrast pairs
コードスニペット
CSS
:root {
--sweet-truffle: #f0dcd7;
--sweet-truffle-rgb: 240 220 215;
--sweet-truffle-oklch: oklch(0.909 0.023 34.3);
}
.element {
color: var(--sweet-truffle);
background-color: hsl(12 45% 89%);
border-color: oklch(0.909 0.023 34.3);
}Tailwind CSS v4
@theme {
--color-sweet-truffle: #f0dcd7;
--color-sweet-truffle-50: #fcf3f1;
--color-sweet-truffle-100: #efe5e3;
--color-sweet-truffle-200: #ded1cd;
--color-sweet-truffle-300: #c3b4af;
--color-sweet-truffle-400: #ac9a95;
--color-sweet-truffle-500: #95817c;
--color-sweet-truffle-600: #7e6d69;
--color-sweet-truffle-700: #655754;
--color-sweet-truffle-800: #4a403d;
--color-sweet-truffle-900: #332c2a;
--color-sweet-truffle-950: #1f1918;
}SCSS
$sweet-truffle: #f0dcd7;
$sweet-truffle-rgb: 240, 220, 215;
$sweet-truffle-light: mix(#fff, $sweet-truffle, 20%);
$sweet-truffle-dark: mix(#000, $sweet-truffle, 20%);
.element {
color: $sweet-truffle;
box-shadow: 0 0 0 2px rgba($sweet-truffle, 0.35);
}