最も近い色名 · #F8A19B
#F8A19B
最も近い色名: Young Crab
#F8A19B（rgb(248 161 155)、hsl(4 87% 79%)、oklch(0.794 0.105 24)）に最も近い色名はYoung Crabです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#F8A19B
oklch(0.794 0.105 24)
カラー変換
- HEX
- #f8a19b
- RGB
- rgb(248 161 155)
- HSL
- hsl(4 87% 79%)
- HWB
- hwb(4 61% 3%)
- OKLCH
- oklch(0.794 0.105 24)
- OKLab
- oklab(0.794 0.096 0.043)
- CIE Lab
- lab(75.09 32.68 17.26)
- LCH
- lch(75.09 36.96 27.8)
- CMYK
- cmyk(0% 35% 38% 3%)
ティント · シェード · トーン
ティント
- FAABA5
- FBB4AF
- FCBEB8
- FDC7C2
- FED0CC
- FFDAD6
- FFE3E0
- FFECEB
- FFF6F5
シェード
- D88B86
- B87672
- 9A625E
- 7C4E4B
- 603C39
- 452A28
- 2C1918
- 150909
- 030101
トーン
- EC9E98
- E09B96
- D49893
- C89590
- BC918E
- B08E8B
- A48B88
- 988786
- 8C8483
カラーハーモニー
補色 +180°
- F8A19B
Young Crab
- 5CCFDB
≈ Blue Radiance
類似色 -30° +30°
- F8A19B
Young Crab
- F1A0C0
≈ Prism Pink
- F1A97A
≈ Hazelnut Milk
トライアド +120° +240°
- F8A19B
Young Crab
- 92CE91
≈ Fennel
- 9ABBFF
≈ Truesky Gloxym
スプリットコンプリメンタリー +150° +210°
- F8A19B
Young Crab
- 6BD2B7
≈ Sweet Garden
- 73C7F5
≈ Nevermind Nirvana
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.98:1 · APCA Lc 38
Ag
AAA黒の上
WCAG 10.56:1 · APCA Lc 64
最適な文字色: #000000
WCAG 10.56:1 (AAA) · APCA Lc 64
Contrast pairs
コードスニペット
CSS
:root {
--young-crab: #f8a19b;
--young-crab-rgb: 248 161 155;
--young-crab-oklch: oklch(0.794 0.105 24);
}
.element {
color: var(--young-crab);
background-color: hsl(4 87% 79%);
border-color: oklch(0.794 0.105 24);
}Tailwind CSS v4
@theme {
--color-young-crab: #f8a19b;
--color-young-crab-50: #ffeae6;
--color-young-crab-100: #ffdbd6;
--color-young-crab-200: #fec4bd;
--color-young-crab-300: #e8a39b;
--color-young-crab-400: #d58580;
--color-young-crab-500: #c26864;
--color-young-crab-600: #a45955;
--color-young-crab-700: #844743;
--color-young-crab-800: #623332;
--color-young-crab-900: #452222;
--color-young-crab-950: #2c1111;
}SCSS
$young-crab: #f8a19b;
$young-crab-rgb: 248, 161, 155;
$young-crab-light: mix(#fff, $young-crab, 20%);
$young-crab-dark: mix(#000, $young-crab, 20%);
.element {
color: $young-crab;
box-shadow: 0 0 0 2px rgba($young-crab, 0.35);
}