最も近い色名 · #FAE2E8
#FAE2E8
最も近い色名: Pork Belly
#FAE2E8（rgb(250 226 232)、hsl(345 71% 93%)、oklch(0.934 0.027 0.7)）に最も近い色名はPork Bellyです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#FAE2E8
oklch(0.934 0.027 0.7)
カラー変換
- HEX
- #fae2e8
- RGB
- rgb(250 226 232)
- HSL
- hsl(345 71% 93%)
- HWB
- hwb(345 89% 2%)
- OKLCH
- oklch(0.934 0.027 0.7)
- OKLab
- oklab(0.934 0.027 0)
- CIE Lab
- lab(91.99 9.23 0.22)
- LCH
- lch(91.99 9.24 1.3)
- CMYK
- cmyk(0% 10% 7% 2%)
ティント · シェード · トーン
ティント
- FBE5EA
- FBE8ED
- FCEBEF
- FCEEF1
- FDF0F3
- FDF3F6
- FEF6F8
- FEF9FA
- FFFCFD
シェード
- D9C4CA
- BAA8AC
- 9B8C90
- 7D7174
- 615759
- 463E40
- 2D2729
- 151213
- 030303
トーン
- EDD8DD
- E1CED2
- D4C4C8
- C8BABD
- BBB0B3
- AFA6A8
- A39C9E
- 979394
- 8C898A
カラーハーモニー
補色 +180°
- FAE2E8
Pork Belly
- D6F0EA
≈ Green Frosting
類似色 -30° +30°
- FAE2E8
Pork Belly
- F5E3F2
≈ Minute Mauve
- FBE3DE
≈ Lady Anne
トライアド +120° +240°
- FAE2E8
Pork Belly
- E6ECD8
≈ Lime Meringue
- DAECFA
≈ Hoarfrost
スプリットコンプリメンタリー +150° +210°
- FAE2E8
Pork Belly
- DDEFE0
≈ Sea Mist
- D5EFF4
≈ Frostproof
テトラード +90° +180° +270°
- FAE2E8
Pork Belly
- F0E9D5
≈ Creamy White
- D6F0EA
≈ Green Frosting
- E2E9FC
≈ Glitter
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.22:1 · APCA Lc 11
Ag
AAA黒の上
WCAG 17.10:1 · APCA Lc 93
最適な文字色: #000000
WCAG 17.10:1 (AAA) · APCA Lc 93
Contrast pairs
コードスニペット
CSS
:root {
--pork-belly: #fae2e8;
--pork-belly-rgb: 250 226 232;
--pork-belly-oklch: oklch(0.934 0.027 0.7);
}
.element {
color: var(--pork-belly);
background-color: hsl(345 71% 93%);
border-color: oklch(0.934 0.027 0.7);
}Tailwind CSS v4
@theme {
--color-pork-belly: #fae2e8;
--color-pork-belly-50: #fdf2f4;
--color-pork-belly-100: #f0e4e7;
--color-pork-belly-200: #dfd0d3;
--color-pork-belly-300: #c4b2b6;
--color-pork-belly-400: #ad989d;
--color-pork-belly-500: #977f85;
--color-pork-belly-600: #7f6c71;
--color-pork-belly-700: #66565a;
--color-pork-belly-800: #4b3f42;
--color-pork-belly-900: #342b2e;
--color-pork-belly-950: #1f181a;
}SCSS
$pork-belly: #fae2e8;
$pork-belly-rgb: 250, 226, 232;
$pork-belly-light: mix(#fff, $pork-belly, 20%);
$pork-belly-dark: mix(#000, $pork-belly, 20%);
.element {
color: $pork-belly;
box-shadow: 0 0 0 2px rgba($pork-belly, 0.35);
}