色名 · #AB6E67
Coral Tree
Coral Treeは#AB6E67：rgb(171 110 103)、hsl(6 29% 54%)、oklch(0.601 0.079 26.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Coral Tree color name →
#AB6E67
oklch(0.601 0.079 26.8)
カラー変換
- HEX
- #ab6e67
- RGB
- rgb(171 110 103)
- HSL
- hsl(6 29% 54%)
- HWB
- hwb(6 40% 33%)
- OKLCH
- oklch(0.601 0.079 26.8)
- OKLab
- oklab(0.601 0.071 0.036)
- CIE Lab
- lab(53.02 24.3 14.5)
- LCH
- lch(53.02 28.3 30.8)
- CMYK
- cmyk(0% 36% 40% 33%)
ティント · シェード · トーン
ティント
- B47C75
- BD8A84
- C59892
- CEA6A1
- D6B5B0
- DFC3C0
- E7D2CF
- EFE1DF
- F7F0EF
シェード
- 945F59
- 7E504B
- 68413D
- 543330
- 402623
- 2D1917
- 1B0E0C
- 0B0404
- 010100
トーン
- A7706A
- A3726C
- 9F746F
- 9B7671
- 977874
- 937A76
- 8E7B79
- 8A7D7B
- 857E7E
カラーハーモニー
補色 +180°
- AB6E67
Coral Tree
- 3E8E98
≈ Aqueous
類似色 -30° +30°
- AB6E67
Coral Tree
- A76D81
≈ Black Elder
- A57451
≈ Balthasar Gold
トライアド +120° +240°
- AB6E67
Coral Tree
- 608E65
≈ Succulent Leaves
- 6B7FB1
≈ Marvellous
スプリットコンプリメンタリー +150° +210°
- AB6E67
Coral Tree
- 46907F
≈ Winter Green
- 5088AA
≈ Safe Haven
テトラード +90° +180° +270°
- AB6E67
Coral Tree
- 7D874F
≈ Field Maple
- 3E8E98
≈ Aqueous
- 8577AB
≈ Grape Parfait
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 4.07:1 · APCA Lc 68
Ag
AA黒の上
WCAG 5.15:1 · APCA Lc 34
最適な文字色: #000000
WCAG 5.15:1 (AA) · APCA Lc 34
Contrast pairs
コードスニペット
CSS
:root {
--coral-tree: #ab6e67;
--coral-tree-rgb: 171 110 103;
--coral-tree-oklch: oklch(0.601 0.079 26.8);
}
.element {
color: var(--coral-tree);
background-color: hsl(6 29% 54%);
border-color: oklch(0.601 0.079 26.8);
}Tailwind CSS v4
@theme {
--color-coral-tree: #ab6e67;
--color-coral-tree-50: #ffede8;
--color-coral-tree-100: #ffdfd9;
--color-coral-tree-200: #f4c8c1;
--color-coral-tree-300: #dda9a0;
--color-coral-tree-400: #c98d85;
--color-coral-tree-500: #b5716a;
--color-coral-tree-600: #99605a;
--color-coral-tree-700: #7b4d48;
--color-coral-tree-800: #5b3734;
--color-coral-tree-900: #402624;
--color-coral-tree-950: #281413;
}SCSS
$coral-tree: #ab6e67;
$coral-tree-rgb: 171, 110, 103;
$coral-tree-light: mix(#fff, $coral-tree, 20%);
$coral-tree-dark: mix(#000, $coral-tree, 20%);
.element {
color: $coral-tree;
box-shadow: 0 0 0 2px rgba($coral-tree, 0.35);
}