最も近い色名 · #F7BEA0
#F7BEA0
最も近い色名: Cream Puff
#F7BEA0（rgb(247 190 160)、hsl(21 84% 80%)、oklch(0.846 0.077 49)）に最も近い色名はCream Puffです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#F7BEA0
oklch(0.846 0.077 49)
カラー変換
- HEX
- #f7bea0
- RGB
- rgb(247 190 160)
- HSL
- hsl(21 84% 80%)
- HWB
- hwb(21 63% 3%)
- OKLCH
- oklch(0.846 0.077 49)
- OKLab
- oklab(0.846 0.051 0.058)
- CIE Lab
- lab(81.7 18.24 23.51)
- LCH
- lch(81.7 29.76 52.2)
- CMYK
- cmyk(0% 23% 35% 3%)
ティント · シェード · トーン
ティント
- F8C5AA
- F9CBB3
- FAD2BC
- FBD8C6
- FCDFCF
- FDE5D9
- FEECE2
- FEF2EC
- FFF9F5
シェード
- D7A58B
- B78C76
- 997561
- 7C5E4E
- 60483B
- 453329
- 2C1F19
- 150D09
- 030201
トーン
- EBB89D
- DFB29A
- D2AB97
- C6A594
- BB9F91
- AF998D
- A3928A
- 978C87
- 8C8683
カラーハーモニー
補色 +180°
- F7BEA0
Cream Puff
- 97D7F5
≈ Juzcar Blue
類似色 -30° +30°
- F7BEA0
Cream Puff
- FBB9B8
≈ Peach Whisper
- E8C793
≈ Molten Gold
トライアド +120° +240°
- F7BEA0
Cream Puff
- 99DDC4
≈ Almost Aqua
- CAC5FD
≈ Innocent Snowdrop
スプリットコンプリメンタリー +150° +210°
- F7BEA0
Cream Puff
- 8EDCDF
≈ Paradisiacal Getaway
- AFCEFF
≈ Night Snow
テトラード +90° +180° +270°
- F7BEA0
Cream Puff
- B3D9A9
≈ Fizz
- 97D7F5
≈ Juzcar Blue
- E3BDED
≈ Beefy Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.63:1 · APCA Lc 28
Ag
AAA黒の上
WCAG 12.82:1 · APCA Lc 75
最適な文字色: #000000
WCAG 12.82:1 (AAA) · APCA Lc 75
Contrast pairs
コードスニペット
CSS
:root {
--cream-puff: #f7bea0;
--cream-puff-rgb: 247 190 160;
--cream-puff-oklch: oklch(0.846 0.077 49);
}
.element {
color: var(--cream-puff);
background-color: hsl(21 84% 80%);
border-color: oklch(0.846 0.077 49);
}Tailwind CSS v4
@theme {
--color-cream-puff: #f7bea0;
--color-cream-puff-50: #ffefe2;
--color-cream-puff-100: #fee1d1;
--color-cream-puff-200: #f0ccb7;
--color-cream-puff-300: #d9ad94;
--color-cream-puff-400: #c59176;
--color-cream-puff-500: #b07757;
--color-cream-puff-600: #95654a;
--color-cream-puff-700: #77503b;
--color-cream-puff-800: #593a2b;
--color-cream-puff-900: #3e281d;
--color-cream-puff-950: #27160d;
}SCSS
$cream-puff: #f7bea0;
$cream-puff-rgb: 247, 190, 160;
$cream-puff-light: mix(#fff, $cream-puff, 20%);
$cream-puff-dark: mix(#000, $cream-puff, 20%);
.element {
color: $cream-puff;
box-shadow: 0 0 0 2px rgba($cream-puff, 0.35);
}