最も近い色名 · #54A6B3
#54A6B3
最も近い色名: Seaside
#54A6B3（rgb(84 166 179)、hsl(188 38% 52%)、oklch(0.679 0.082 209)）に最も近い色名はSeasideです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#54A6B3
oklch(0.679 0.082 209)
カラー変換
- HEX
- #54a6b3
- RGB
- rgb(84 166 179)
- HSL
- hsl(188 38% 52%)
- HWB
- hwb(188 33% 30%)
- OKLCH
- oklch(0.679 0.082 209)
- OKLab
- oklab(0.679 -0.072 -0.04)
- CIE Lab
- lab(63.38 -23.31 -14.86)
- LCH
- lch(63.38 27.64 212.5)
- CMYK
- cmyk(53% 7% 0% 30%)
ティント · シェード · トーン
ティント
- 67AFBA
- 79B8C2
- 8BC1CA
- 9CC9D1
- ACD2D9
- BDDBE0
- CDE4E8
- DEEDF0
- EEF6F7
シェード
- 48909B
- 3C7A84
- 31656E
- 265158
- 1B3E43
- 112B2F
- 081A1D
- 020A0C
- 000101
トーン
- 5BA2AE
- 619FA9
- 669BA4
- 6B979E
- 6F9399
- 738F94
- 778C8F
- 7A888A
- 7D8485
カラーハーモニー
補色 +180°
- 54A6B3
Seaside
- C5857B
≈ Luscious Lobster
類似色 -30° +30°
- 54A6B3
Seaside
- 5AA999
≈ Dragon Bay
- 679FC5
≈ Gulf Stream Blue
トライアド +120° +240°
- 54A6B3
Seaside
- B486B1
≈ Drama Violet
- AC965B
≈ Mossy Rock
スプリットコンプリメンタリー +150° +210°
- 54A6B3
Seaside
- C28397
≈ Strawberry Jubilee
- BE8C64
≈ Tatami Tan
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.80:1 · APCA Lc 54
Ag
AAA黒の上
WCAG 7.48:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--seaside: #54a6b3;
--seaside-rgb: 84 166 179;
--seaside-oklch: oklch(0.679 0.082 209);
}
.element {
color: var(--seaside);
background-color: hsl(188 38% 52%);
border-color: oklch(0.679 0.082 209);
}Tailwind CSS v4
@theme {
--color-seaside: #54a6b3;
--color-seaside-50: #dbfcff;
--color-seaside-100: #caf0f7;
--color-seaside-200: #acdee8;
--color-seaside-300: #85c3cf;
--color-seaside-400: #60acb8;
--color-seaside-500: #3495a3;
--color-seaside-600: #2f7e8a;
--color-seaside-700: #25656f;
--color-seaside-800: #184a51;
--color-seaside-900: #103438;
--color-seaside-950: #031f23;
}SCSS
$seaside: #54a6b3;
$seaside-rgb: 84, 166, 179;
$seaside-light: mix(#fff, $seaside, 20%);
$seaside-dark: mix(#000, $seaside, 20%);
.element {
color: $seaside;
box-shadow: 0 0 0 2px rgba($seaside, 0.35);
}