色名 · #A17E64
Tender Twig
Tender Twigは#A17E64：rgb(161 126 100)、hsl(26 24% 51%)、oklch(0.62 0.057 58.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Tender Twig color name →
#A17E64
oklch(0.62 0.057 58.1)
カラー変換
- HEX
- #a17e64
- RGB
- rgb(161 126 100)
- HSL
- hsl(26 24% 51%)
- HWB
- hwb(26 39% 37%)
- OKLCH
- oklch(0.62 0.057 58.1)
- OKLab
- oklab(0.62 0.03 0.049)
- CIE Lab
- lab(55.74 11.27 19.64)
- LCH
- lch(55.74 22.64 60.2)
- CMYK
- cmyk(0% 22% 38% 37%)
ティント · シェード · トーン
ティント
- AA8A73
- B49782
- BDA391
- C6B0A0
- D0BDAF
- D9CABF
- E3D7CF
- ECE4DF
- F6F2EF
シェード
- 8B6D56
- 765C48
- 624C3B
- 4E3C2E
- 3C2D22
- 2A1F16
- 19110B
- 090503
- 010100
トーン
- 9E7E67
- 9B7F6A
- 977F6D
- 947F70
- 917F73
- 8E8075
- 8A8078
- 87807B
- 83807D
カラーハーモニー
補色 +180°
- A17E64
Tender Twig
- 658CA5
≈ Sea Crystal
類似色 -30° +30°
- A17E64
Tender Twig
- A67973
≈ Rum Spice
- 95855E
≈ Twisted Tail
トライアド +120° +240°
- A17E64
Tender Twig
- 5F9286
≈ Thermal Spring
- 8A7FA5
≈ Violet Chalk
スプリットコンプリメンタリー +150° +210°
- A17E64
Tender Twig
- 5B9098
≈ Cabana Blue
- 7785AA
≈ Enchanting Sky
テトラード +90° +180° +270°
- A17E64
Tender Twig
- 6F9073
≈ Watercress
- 658CA5
≈ Sea Crystal
- 9A7A98
≈ Screen Gem
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.69:1 · APCA Lc 64
Ag
AA黒の上
WCAG 5.68:1 · APCA Lc 37
最適な文字色: #000000
WCAG 5.68:1 (AA) · APCA Lc 37
Contrast pairs
コードスニペット
CSS
:root {
--tender-twig: #a17e64;
--tender-twig-rgb: 161 126 100;
--tender-twig-oklch: oklch(0.62 0.057 58.1);
}
.element {
color: var(--tender-twig);
background-color: hsl(26 24% 51%);
border-color: oklch(0.62 0.057 58.1);
}Tailwind CSS v4
@theme {
--color-tender-twig: #a17e64;
--color-tender-twig-50: #fff2e5;
--color-tender-twig-100: #f7e4d5;
--color-tender-twig-200: #e7cfbc;
--color-tender-twig-300: #ceb19b;
--color-tender-twig-400: #b9977d;
--color-tender-twig-500: #a37d60;
--color-tender-twig-600: #8a6a52;
--color-tender-twig-700: #6f5541;
--color-tender-twig-800: #523d2f;
--color-tender-twig-900: #392a20;
--color-tender-twig-950: #23180f;
}SCSS
$tender-twig: #a17e64;
$tender-twig-rgb: 161, 126, 100;
$tender-twig-light: mix(#fff, $tender-twig, 20%);
$tender-twig-dark: mix(#000, $tender-twig, 20%);
.element {
color: $tender-twig;
box-shadow: 0 0 0 2px rgba($tender-twig, 0.35);
}