色名 · #AEBED2
Sweet Blue
Sweet Blueは#AEBED2：rgb(174 190 210)、hsl(213 29% 75%)、oklch(0.796 0.033 254)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Sweet Blue color name →
#AEBED2
oklch(0.796 0.033 254)
カラー変換
- HEX
- #aebed2
- RGB
- rgb(174 190 210)
- HSL
- hsl(213 29% 75%)
- HWB
- hwb(213 68% 18%)
- OKLCH
- oklch(0.796 0.033 254)
- OKLab
- oklab(0.796 -0.009 -0.032)
- CIE Lab
- lab(76.22 -2.57 -12.05)
- LCH
- lch(76.22 12.32 258)
- CMYK
- cmyk(17% 10% 0% 18%)
ティント · シェード · トーン
ティント
- B6C4D6
- BECBDB
- C6D1DF
- CED8E4
- D6DEE8
- DEE5ED
- E6EBF1
- EEF2F6
- F7F8FA
シェード
- 97A5B6
- 808C9B
- 6A7581
- 555E68
- 414850
- 2E3339
- 1C1F24
- 0B0D10
- 010202
トーン
- A9B8CA
- A5B1C1
- A0ABB9
- 9BA5B0
- 979FA8
- 9298A0
- 8E9298
- 898C90
- 858688
カラーハーモニー
補色 +180°
- AEBED2
Sweet Blue
- CABAA5
≈ Sail Grey
類似色 -30° +30°
- AEBED2
Sweet Blue
- A6C2CC
≈ Memorybook Blue
- B9BAD2
≈ Fragile
トライアド +120° +240°
- AEBED2
Sweet Blue
- D1B4B6
≈ Smoked Lavender
- B4C1AC
≈ Wedding Mint
スプリットコンプリメンタリー +150° +210°
- AEBED2
Sweet Blue
- D0B6AB
≈ Likeable Sand
- BFBEA5
≈ Mint Frost
テトラード +90° +180° +270°
- AEBED2
Sweet Blue
- CDB4C2
≈ Twilight Bloom
- CABAA5
≈ Sail Grey
- AAC4B7
≈ Kind Green
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.89:1 · APCA Lc 36
Ag
AAA黒の上
WCAG 11.09:1 · APCA Lc 67
最適な文字色: #000000
WCAG 11.09:1 (AAA) · APCA Lc 67
Contrast pairs
コードスニペット
CSS
:root {
--sweet-blue: #aebed2;
--sweet-blue-rgb: 174 190 210;
--sweet-blue-oklch: oklch(0.796 0.033 254);
}
.element {
color: var(--sweet-blue);
background-color: hsl(213 29% 75%);
border-color: oklch(0.796 0.033 254);
}Tailwind CSS v4
@theme {
--color-sweet-blue: #aebed2;
--color-sweet-blue-50: #eff6ff;
--color-sweet-blue-100: #e1e9f3;
--color-sweet-blue-200: #cbd5e3;
--color-sweet-blue-300: #adb9c9;
--color-sweet-blue-400: #91a0b2;
--color-sweet-blue-500: #77889c;
--color-sweet-blue-600: #657384;
--color-sweet-blue-700: #515c6a;
--color-sweet-blue-800: #3a434e;
--color-sweet-blue-900: #282f36;
--color-sweet-blue-950: #161b21;
}SCSS
$sweet-blue: #aebed2;
$sweet-blue-rgb: 174, 190, 210;
$sweet-blue-light: mix(#fff, $sweet-blue, 20%);
$sweet-blue-dark: mix(#000, $sweet-blue, 20%);
.element {
color: $sweet-blue;
box-shadow: 0 0 0 2px rgba($sweet-blue, 0.35);
}