色名 · #43A7AA

Tidal Teal

Tidal Tealは#43A7AA：rgb(67 167 170)、hsl(182 43% 46%)、oklch(0.672 0.092 198)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Teal mean? → · Tidal Teal color name →

#43A7AA

oklch(0.672 0.092 198)

カラー変換

HEX: #43a7aa
RGB: rgb(67 167 170)
HSL: hsl(182 43% 46%)
HWB: hwb(182 26% 33%)
OKLCH: oklch(0.672 0.092 198)
OKLab: oklab(0.672 -0.087 -0.028)
CIE Lab: lab(62.83 -29.35 -10.74)
LCH: lch(62.83 31.25 200.1)
CMYK: cmyk(61% 2% 0% 33%)

ティント · シェード · トーン

ティント

5AB0B2
6FB9BB
82C1C3
95CACB
A7D3D4
B9DCDC
CAE5E5
DCEDEE
EDF6F6

シェード

399193
2F7B7D
266668
1D5253
143E3F
0C2C2D
051A1B
010A0B
000101

トーン

4DA3A6
569FA2
5D9C9D
649899
6A9495
6F9091
748C8C
788888
7C8484

カラーハーモニー

補色 +180°

43A7AA
Tidal Teal
C87E80
≈ Dirty Pink

類似色 -30° +30°

トライアド +120° +240°

スプリットコンプリメンタリー +150° +210°

テトラード +90° +180° +270°

コントラストとアクセシビリティ

白の上

WCAG 2.85:1 · APCA Lc 54

Fail

黒の上

WCAG 7.34:1 · APCA Lc 47

AAA

最適な文字色: #000000

WCAG 7.34:1 (AAA) · APCA Lc 47

Contrast pairs

コードスニペット

CSS

:root {
  --tidal-teal: #43a7aa;
  --tidal-teal-rgb: 67 167 170;
  --tidal-teal-oklch: oklch(0.672 0.092 198);
}

.element {
  color: var(--tidal-teal);
  background-color: hsl(182 43% 46%);
  border-color: oklch(0.672 0.092 198);
}

Tailwind CSS v4

@theme {
  --color-tidal-teal: #43a7aa;
  --color-tidal-teal-50: #d8feff;
  --color-tidal-teal-100: #c5f2f4;
  --color-tidal-teal-200: #a6e1e4;
  --color-tidal-teal-300: #7dc6ca;
  --color-tidal-teal-400: #53afb2;
  --color-tidal-teal-500: #18989c;
  --color-tidal-teal-600: #1a8184;
  --color-tidal-teal-700: #16676a;
  --color-tidal-teal-800: #0d4c4d;
  --color-tidal-teal-900: #093535;
  --color-tidal-teal-950: #002020;
}

SCSS

$tidal-teal: #43a7aa;
$tidal-teal-rgb: 67, 167, 170;
$tidal-teal-light: mix(#fff, $tidal-teal, 20%);
$tidal-teal-dark: mix(#000, $tidal-teal, 20%);

.element {
  color: $tidal-teal;
  box-shadow: 0 0 0 2px rgba($tidal-teal, 0.35);
}

近い色名

Palettes with similar colors

ツールで開く

ピッカーペアコントラストチェッカー Studio JSON API