最も近い色名 · #B2663C
#B2663C
最も近い色名: Caramel Dream
#B2663C（rgb(178 102 60)、hsl(21 50% 47%)、oklch(0.588 0.113 48.3)）に最も近い色名はCaramel Dreamです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#B2663C
oklch(0.588 0.113 48.3)
カラー変換
- HEX
- #b2663c
- RGB
- rgb(178 102 60)
- HSL
- hsl(21 50% 47%)
- HWB
- hwb(21 24% 30%)
- OKLCH
- oklch(0.588 0.113 48.3)
- OKLab
- oklab(0.588 0.075 0.084)
- CIE Lab
- lab(51.5 28.62 37.12)
- LCH
- lch(51.5 46.87 52.4)
- CMYK
- cmyk(0% 43% 66% 30%)
ティント · シェード · トーン
ティント
- BB7550
- C38463
- CB9376
- D3A289
- DBB29D
- E3C1B0
- EAD0C3
- F1E0D7
- F8EFEB
シェード
- 9A5833
- 834A2A
- 6D3C21
- 572F19
- 432311
- 2F170A
- 1D0C04
- 0C0401
- 010000
トーン
- AE6944
- A96C4C
- A56F53
- A0725A
- 9B7561
- 967767
- 91796E
- 8B7C74
- 867E7A
カラーハーモニー
補色 +180°
- B2663C
Caramel Dream
- 0A89B1
≈ Stomy Shower
類似色 -30° +30°
- B2663C
Caramel Dream
- B65F62
≈ Her Velour
- A1731B
≈ Golden Hind
トライアド +120° +240°
- B2663C
Caramel Dream
- 189270
≈ Leprechaun
- 7A70BC
≈ Venus Violet
スプリットコンプリメンタリー +150° +210°
- B2663C
Caramel Dream
- 008E92
≈ Christina Brown
- 517DBF
≈ Blue Iolite
テトラード +90° +180° +270°
- B2663C
Caramel Dream
- 598C48
≈ Victorian Garden
- 0A89B1
≈ Stomy Shower
- 9966A8
≈ Allium
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 4.32:1 · APCA Lc 70
Ag
AA黒の上
WCAG 4.85:1 · APCA Lc 32
最適な文字色: #000000
WCAG 4.85:1 (AA) · APCA Lc 32
Contrast pairs
コードスニペット
CSS
:root {
--caramel-dream: #b2663c;
--caramel-dream-rgb: 178 102 60;
--caramel-dream-oklch: oklch(0.588 0.113 48.3);
}
.element {
color: var(--caramel-dream);
background-color: hsl(21 50% 47%);
border-color: oklch(0.588 0.113 48.3);
}Tailwind CSS v4
@theme {
--color-caramel-dream: #b2663c;
--color-caramel-dream-50: #ffedd9;
--color-caramel-dream-100: #ffdec7;
--color-caramel-dream-200: #fdc7a9;
--color-caramel-dream-300: #e7a783;
--color-caramel-dream-400: #d58961;
--color-caramel-dream-500: #c16d3d;
--color-caramel-dream-600: #a35c35;
--color-caramel-dream-700: #834a2a;
--color-caramel-dream-800: #62351e;
--color-caramel-dream-900: #452414;
--color-caramel-dream-950: #2c1206;
}SCSS
$caramel-dream: #b2663c;
$caramel-dream-rgb: 178, 102, 60;
$caramel-dream-light: mix(#fff, $caramel-dream, 20%);
$caramel-dream-dark: mix(#000, $caramel-dream, 20%);
.element {
color: $caramel-dream;
box-shadow: 0 0 0 2px rgba($caramel-dream, 0.35);
}