色名 · #406356
Stromboli
Stromboliは#406356：rgb(64 99 86)、hsl(158 21% 32%)、oklch(0.469 0.046 169)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Stromboli color name →
#406356
oklch(0.469 0.046 169)
カラー変換
- HEX
- #406356
- RGB
- rgb(64 99 86)
- HSL
- hsl(158 21% 32%)
- HWB
- hwb(158 25% 61%)
- OKLCH
- oklch(0.469 0.046 169)
- OKLab
- oklab(0.469 -0.045 0.009)
- CIE Lab
- lab(38.98 -15.59 3.2)
- LCH
- lch(38.98 15.92 168.4)
- CMYK
- cmyk(35% 0% 13% 61%)
ティント · シェード · トーン
ティント
- 527165
- 648075
- 768F85
- 899E96
- 9CAEA6
- AFBEB8
- C3CEC9
- D6DEDB
- EBEEED
シェード
- 36554A
- 2D473E
- 243A32
- 1B2E27
- 13211C
- 0B1612
- 050B08
- 010302
- 000000
トーン
- 47665A
- 4D695E
- 546C62
- 5A6F66
- 61726B
- 67746F
- 6D7773
- 737A77
- 7A7D7C
カラーハーモニー
補色 +180°
- 406356
Stromboli
- 6F505E
≈ Dark Olive Paste
類似色 -30° +30°
- 406356
Stromboli
- 4D6148
≈ Tom Thumb
- 3A6364
≈ Pyrite Green
トライアド +120° +240°
- 406356
Stromboli
- 595673
≈ The Fang
- 705344
≈ Brevity Brown
スプリットコンプリメンタリー +150° +210°
- 406356
Stromboli
- 66526B
≈ Vintner
- 725050
≈ Sheringa Rose
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.69:1 · APCA Lc 83
Ag
Fail黒の上
WCAG 3.13:1 · APCA Lc 19
最適な文字色: #FFFFFF
WCAG 6.69:1 (AA) · APCA Lc 83
Contrast pairs
コードスニペット
CSS
:root {
--stromboli: #406356;
--stromboli-rgb: 64 99 86;
--stromboli-oklch: oklch(0.469 0.046 169);
}
.element {
color: var(--stromboli);
background-color: hsl(158 21% 32%);
border-color: oklch(0.469 0.046 169);
}Tailwind CSS v4
@theme {
--color-stromboli: #406356;
--color-stromboli-50: #e9faf3;
--color-stromboli-100: #daede6;
--color-stromboli-200: #c2dbd2;
--color-stromboli-300: #a1bfb4;
--color-stromboli-400: #84a89a;
--color-stromboli-500: #689081;
--color-stromboli-600: #587a6d;
--color-stromboli-700: #466257;
--color-stromboli-800: #33483f;
--color-stromboli-900: #23322b;
--color-stromboli-950: #121e19;
}SCSS
$stromboli: #406356;
$stromboli-rgb: 64, 99, 86;
$stromboli-light: mix(#fff, $stromboli, 20%);
$stromboli-dark: mix(#000, $stromboli, 20%);
.element {
color: $stromboli;
box-shadow: 0 0 0 2px rgba($stromboli, 0.35);
}