カラーパレットジェネレーター — 補色・類似色・三色配色

補色、類似色、三色、四色の調和パレットを生成。HEX、RGB、HSL形式でエクスポート。

Base Color:

Presets:

Complementary

#2563EB

rgb(37, 99, 235)

hsl(221, 83%, 53%)

1.0:1

#7154EF

rgb(113, 84, 239)

hsl(251, 83%, 63%)

2.5:1

#EBAD25

rgb(235, 173, 37)

hsl(41, 83%, 53%)

1.2:1

#F1C76B

rgb(241, 199, 107)

hsl(41, 83%, 68%)

1.2:1

#A8CA13

rgb(168, 202, 19)

hsl(71, 83%, 43%)

Analogous

#25C6EB

rgb(37, 198, 235)

hsl(191, 83%, 53%)

1.3:1

#4AA7EE

rgb(74, 167, 238)

hsl(206, 83%, 61%)

2.0:1

#2563EB

rgb(37, 99, 235)

hsl(221, 83%, 53%)

1.1:1

#4A55EE

rgb(74, 85, 238)

hsl(236, 83%, 61%)

1.4:1

#4A25EB

rgb(74, 37, 235)

hsl(251, 83%, 53%)

Triadic

#2563EB

rgb(37, 99, 235)

hsl(221, 83%, 53%)

1.9:1

#7F9DDD

rgb(127, 157, 221)

hsl(221, 58%, 68%)

1.6:1

#EB2563

rgb(235, 37, 99)

hsl(341, 83%, 53%)

1.5:1

#DD7F9D

rgb(221, 127, 157)

hsl(341, 58%, 68%)

1.8:1

#63EB25

rgb(99, 235, 37)

hsl(101, 83%, 53%)

Tetradic

#2563EB

rgb(37, 99, 235)

hsl(221, 83%, 53%)

1.4:1

#EB25C6

rgb(235, 37, 198)

hsl(311, 83%, 53%)

1.9:1

#EBAD25

rgb(235, 173, 37)

hsl(41, 83%, 53%)

1.2:1

#25EB4A

rgb(37, 235, 74)

hsl(131, 83%, 53%)

2.1:1

#A17AD3

rgb(161, 122, 211)

hsl(266, 50%, 65%)

Split-Complementary

#2563EB

rgb(37, 99, 235)

hsl(221, 83%, 53%)

1.8:1

#6B95F1

rgb(107, 149, 241)

hsl(221, 83%, 68%)

1.3:1

#EB4A25

rgb(235, 74, 37)

hsl(11, 83%, 53%)

2.8:1

#C6EB25

rgb(198, 235, 37)

hsl(71, 83%, 53%)

1.2:1

#D7C69F

rgb(215, 198, 159)

hsl(41, 42%, 73%)

Export

{
  "Complementary": [
    "#2563eb",
    "#7154ef",
    "#ebad25",
    "#f1c76b",
    "#a8ca13"
  ],
  "Analogous": [
    "#25c6eb",
    "#4aa7ee",
    "#2563eb",
    "#4a55ee",
    "#4a25eb"
  ],
  "Triadic": [
    "#2563eb",
    "#7f9ddd",
    "#eb2563",
    "#dd7f9d",
    "#63eb25"
  ],
  "Tetradic": [
    "#2563eb",
    "#eb25c6",
    "#ebad25",
    "#25eb4a",
    "#a17ad3"
  ],
  "Split-Complementary": [
    "#2563eb",
    "#6b95f1",
    "#eb4a25",
    "#c6eb25",
    "#d7c69f"
  ]
}

𝕏 Twitter in LinkedIn

このツールを評価

4.5 / 5 · 118 件の評価

その他のツール

🎨色変換 TWTailwind CSSカラー 🌈CSSグラデーション生成 🔲Box Shadow生成

How to Use

Enter or pick a base color
Choose a harmony type (complementary, analogous, etc.)
Preview generated palettes
Click any color to copy its value
Export all colors as JSON or CSS variables

Use Cases

Web and app UI design
Brand color selection
Data visualization coloring
CSS theme creation

FAQ

What color harmonies are available?

Complementary, analogous, triadic, tetradic, and split-complementary schemes.

What formats can I export?

HEX, RGB, and HSL values. You can also export as JSON or CSS custom properties.

カラーパレットジェネレーター — 補色・類似色・三色配色

Complementary

Analogous

Triadic

Tetradic

Split-Complementary

Export

その他のツール

Recommended

最新情報を受け取る

How to Use

Use Cases

FAQ