最も近い色名 · #BAF0F4
#BAF0F4
最も近い色名: Pale Sky
#BAF0F4(rgb(186 240 244)、hsl(184 73% 84%)、oklch(0.919 0.055 201.9))に最も近い色名はPale Skyです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#BAF0F4
oklch(0.919 0.055 201.9)
カラー変換
- HEX
- #baf0f4
- RGB
- rgb(186 240 244)
- HSL
- hsl(184 73% 84%)
- HWB
- hwb(184 73% 4%)
- OKLCH
- oklch(0.919 0.055 201.9)
- OKLab
- oklab(0.919 -0.051 -0.021)
- CIE Lab
- lab(91.18 -17.11 -7.86)
- LCH
- lch(91.18 18.83 204.7)
- CMYK
- cmyk(24% 2% 0% 4%)
ティント · シェード · トーン
ティント
- C1F2F5
- C8F3F6
- D0F5F7
- D7F6F8
- DDF8FA
- E4F9FB
- EBFBFC
- F2FCFD
- F8FEFE
シェード
- A1D1D4
- 89B2B5
- 729597
- 5C787A
- 465D5E
- 324344
- 1E2A2B
- 0D1414
- 020303
トーン
- B4E4E8
- AFD9DC
- A9CDD0
- A3C2C4
- 9EB7B8
- 98ABAD
- 92A0A1
- 8C9596
- 868B8B
カラーハーモニー
補色 +180°
- BAF0F4
Pale Sky
- FFDAD8
≈ Cottagecore Sunset
類似色 -30° +30°
- BAF0F4
Pale Sky
- C0F1E0
≈ Light Water Wings
- C6EBFF
≈ Blue Java Banana
トライアド +120° +240°
- BAF0F4
Pale Sky
- F6D9FB
≈ Lavender Savour
- F7E2BC
≈ Kettle Corn
スプリットコンプリメンタリー +150° +210°
- BAF0F4
Pale Sky
- FFD8E8
≈ Strawberry Milk
- FFDCC8
≈ Unbleached Silk
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.24:1 · APCA Lc 12
Ag
AAA黒の上
WCAG 16.85:1 · APCA Lc 92
最適な文字色: #000000
WCAG 16.85:1 (AAA) · APCA Lc 92
Contrast pairs
コードスニペット
CSS
:root {
--pale-sky: #baf0f4;
--pale-sky-rgb: 186 240 244;
--pale-sky-oklch: oklch(0.919 0.055 201.9);
}
.element {
color: var(--pale-sky);
background-color: hsl(184 73% 84%);
border-color: oklch(0.919 0.055 201.9);
}Tailwind CSS v4
@theme {
--color-pale-sky: #baf0f4;
--color-pale-sky-50: #e4fafc;
--color-pale-sky-100: #d4eef0;
--color-pale-sky-200: #badcdf;
--color-pale-sky-300: #97c0c4;
--color-pale-sky-400: #78a9ac;
--color-pale-sky-500: #589196;
--color-pale-sky-600: #4b7b7f;
--color-pale-sky-700: #3c6265;
--color-pale-sky-800: #2a484a;
--color-pale-sky-900: #1d3233;
--color-pale-sky-950: #0c1e1f;
}SCSS
$pale-sky: #baf0f4;
$pale-sky-rgb: 186, 240, 244;
$pale-sky-light: mix(#fff, $pale-sky, 20%);
$pale-sky-dark: mix(#000, $pale-sky, 20%);
.element {
color: $pale-sky;
box-shadow: 0 0 0 2px rgba($pale-sky, 0.35);
}