色名 · #A67498

Teen Queen

Teen Queenは#A67498：rgb(166 116 152)、hsl(317 22% 55%)、oklch(0.621 0.08 337.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Pink mean? → · Teen Queen color name →

#A67498

oklch(0.621 0.08 337.2)

カラー変換

HEX: #a67498
RGB: rgb(166 116 152)
HSL: hsl(317 22% 55%)
HWB: hwb(317 45% 35%)
OKLCH: oklch(0.621 0.08 337.2)
OKLab: oklab(0.621 0.073 -0.031)
CIE Lab: lab(54.98 24.56 -11.32)
LCH: lch(54.98 27.04 335.2)
CMYK: cmyk(0% 30% 8% 35%)

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

ティント

AF81A2
B88FAC
C19CB6
CAAAC0
D3B8CB
DCC6D5
E5D4DF
EDE2EA
F6F0F4

シェード

906484
7A5470
65455C
51374A
3E2938
2B1B27
1A0F17
0A0508
010101

トーン

A27596
9F7793
9B7891
97798E
947B8C
907C8A
8C7D87
887E85
847F82

カラーハーモニー

補色 +180°

A67498
Teen Queen
5C9574
≈ Skarsnik Green

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 3.76:1 · APCA Lc 65

Fail

黒の上

WCAG 5.57:1 · APCA Lc 37

最適な文字色: #000000

WCAG 5.57:1 (AA) · APCA Lc 37

Contrast pairs

コードスニペット

CSS

:root {
  --teen-queen: #a67498;
  --teen-queen-rgb: 166 116 152;
  --teen-queen-oklch: oklch(0.621 0.08 337.2);
}

.element {
  color: var(--teen-queen);
  background-color: hsl(317 22% 55%);
  border-color: oklch(0.621 0.08 337.2);
}

Tailwind CSS v4

@theme {
  --color-teen-queen: #a67498;
  --color-teen-queen-50: #ffedfd;
  --color-teen-queen-100: #fbdef1;
  --color-teen-queen-200: #ecc8df;
  --color-teen-queen-300: #d4a8c5;
  --color-teen-queen-400: #be8db0;
  --color-teen-queen-500: #a87199;
  --color-teen-queen-600: #8e6082;
  --color-teen-queen-700: #724d68;
  --color-teen-queen-800: #54384d;
  --color-teen-queen-900: #3a2636;
  --color-teen-queen-950: #241421;
}

SCSS

$teen-queen: #a67498;
$teen-queen-rgb: 166, 116, 152;
$teen-queen-light: mix(#fff, $teen-queen, 20%);
$teen-queen-dark: mix(#000, $teen-queen, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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