🧭 目的・スタイルで探せる、おしゃれフォント図鑑が登場！【いますぐ見る】

ウェブ制作

ウェブ考察

ウェブ考察

【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選

2018年4月24日

配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。

配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。

デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。

コンテンツ目次

1. 単色系カラーパレット
2. 寒色系カラーパレット
3. 鮮やかなカラーパレット
4. 暖色系カラーパレット
5. 補色系カラーパレット

単色カラーパレット（英: Monochromatic）

単色のカラーパレットは、単一の基本となる色合いで構成され、彩度や光彩、色調によって拡張されます。黒や白または灰色をカラーパレットに追加することで、幅広く利用できる一貫性のある配色を手軽に作成することができます。

Image via Philipp Shuruev

#e1dcd9

#8e8781

#a67f78

#414143

Comfy & Neutral

目次へ戻る

Image via Gluiki

#ffd954

#e4b660

#f2ab39

#69491a

Mellow Agate

目次へ戻る

Image via FlashMovie

#d1ede1

#7bc5ae

#028c6a

#003e19

Misty Greens

目次へ戻る

101-color-combinations-sttk-post12

Image via Patiwat Sariya

#d1dddb

#85b8cb

#1d6a96

#283b42

Subdued Succulent

目次へ戻る

Image via Bogdan Sonjachnyj

#d5d2c1

#bd8e62

#a46843

#370d00

Western Wear

目次へ戻る

Image via Rattiya Lamrod

#9bcfb8

#7fb174

#689c97

#072a24

Emerald Garden

目次へ戻る

Image via Gilmanshin

#ffc2c3

#fe7773

#e81e25

#0e0301

Rosy Reds

目次へ戻る

Image via Plateresca

#ece4e2

#fcd3d1

#fcdff3

#fe929f

Pink Powders

目次へ戻る

Image via MaxFrost

#d3b7d8

#a13e97

#632a7e

#280e3b

Electric Purples

目次へ戻る

寒色系カラーパレット（英: Cool Hues）

より涼しいクールな色は、青やみどり、むらさき色で構成され、静かで落ち着いた雰囲気を演出します。これらの配色をデザインに利用することで、信頼せや落ち着きを表現できます。これらの配色は、コントラストを効果的に表現できるため、暖かい色合いとうまくマッチします。

Image via Nella

#f29b52

#f6d074

#f4c669

#f27786

Turkish Coffee

目次へ戻る

Image via Zaksheuskaya

#e3a6a1

#bc5f6a

#19b3ba

#034b61

Color Whirl

目次へ戻る

Image via TWStock

#bdbdbf

#5580a0

#cc8a4d

#32435f

Grunge Graffiti

目次へ戻る

Image via Space creator

#b2a59f

#023459

#1e646e

#002c2f

Celestial Green

目次へ戻る

Image via Karpenkov Denis

#b98d72

#ae4951

#57233a

#161b1f

Cork Crowd

目次へ戻る

Image via IS Studio

#ead6bd

#a88661

#504e63

#00142f

Snakeskin & Scales

目次へ戻る

Image via schankz

#ccd3d9

#fed5d9

#7e212c

#321e17

Blooming Blossoms

目次へ戻る

Image via dinkaspell

#e4dace

#e5bb4b

#498eaf

#631f16

Angular Kaleidoscope

目次へ戻る

Image via j.chizhe

#f2dd66

#9a1b27

#747ba9

#3b3857

Raspberry Tart

目次へ戻る

Image via BlueOrange Studio

#0359ae

#14b09b

#ebe5d9

#cc8a56

Vitamin Sea

目次へ戻る

Image via marbleszone.com

#a6c2ce

#9c8f96

#ebc57c

#6b799e

Icy Stone

目次へ戻る

Image via Quality Master

#97baa4

#499360

#295651

#232941

Sea Green

目次へ戻る

Image via Yulia Grigoryeva

#dcc1b0

#869dab

#847072

#3d313f

Peace & Tranquility

目次へ戻る

Image via Olha Vietrova

#b2d6ca

#fe5858

#024b40

#5d353e

Pure & Pigmented

目次へ戻る

Image via NITIKON AEMITTIPOL

#e5edf8

#e29e93

#edbc7a

#0384bd

Soft Watercolors

目次へ戻る

Image via Ken Phung

#91d4c2

#45bb89

#3d82ab

#003853

Northern Lights

目次へ戻る

Image via Alena Ozerova.

#1e9ea0

#004e6d

#fec0c1

#dc2543

Pool Daze

目次へ戻る

Image via woottigon

#8ca6b3

#87c488

#aa641e

#284651

Morning Fishermen

目次へ戻る

Image via wacomka

#db5a9a

#e5a46e

#125669

#0a5b54

Floral & Fun

目次へ戻る

Image via Arif Supriyadi

#d9cfe7

#a8bcba

#acc66d

#50697d

Cool Chameleon

目次へ戻る

Image via acharyahargreaves

#324856

#4a746a

#d18237

#d66c44

Gorgeous Galaxies

目次へ戻る

Image via maratr

#ffa289

#6a92cc

#706fab

#50293c

Bold Ballerinas

目次へ戻る

Image via everst

#dbdbe5

#a5b7c1

#535d55

#514644

Mountainous Trek

目次へ戻る

Image via Romrodphoto

#c2e6ff

#859f3c

#007f52

#45451f

Piers & Pelicans

目次へ戻る

Image via Andrew Mayovskyy

#eb8f90

#ffb471

#adbed2

#12406a

Greek Getaway

目次へ戻る

Image via Nattapat Jitrungruengnij

#6c838b

#bb7748

#9e6d70

#7f726a

Natural Linens

目次へ戻る

Image via herryfaizal

#fddcef

#d5c5e9

#3a5a69

#030923

Foggy Landscapess

目次へ戻る

Image via Oleg Znamenskiy

#f2f4ef

#c2e3f4

#efb730

#030305

Bare Birch

目次へ戻る

Image via Alena Ozerova

#d7cbbd

#c1893f

#af8f90

#69454f

Bundled Yarn

目次へ戻る

Image via Rusya007

#f5e2d4

#ecba73

#a8dff1

#024757

Ocean Floor

目次へ戻る

Image via ED Reardon

#d0dae4

#2a6078

#b9cd74

#085438

Desert Beauty

目次へ戻る

Image via J.D.S

#82bbb5

#ca884b

#d1825b

#cca142

Vintage Vibes

目次へ戻る

Image via John A. Anderson

#afb3bc

#e5ba22

#757430

#d0b987

Central Breeze

目次へ戻る

Image via sergey causelove

#7f9871

#9795a3

#c94f44

#261326

Island Tourist

目次へ戻る

Image via Kate Aedon

#cadbae

#b0cccf

#d65a50

#1e3815

Blooming Bouquet

目次へ戻る

Image via Irina Bort

#bed3d4

#e8caa4

#a1b872

#e5d67b

Calming & Soothing

目次へ戻る

Image via MARGRIT HIRSCH

#eda2b6

#abbf4e

#7a96a2

#252621

Exterior Blossoms

目次へ戻る

鮮やかなカラーパレット（英: Punchy & Bright）

鮮やかな色は注目を集め、激しい色合いです。この大胆な性質は、他の色合いと組み合わせたときに、他を圧倒してしまう恐れがあるので、控えめに利用するようにしましょう。過剰に彩度の高い色合いを避けるために、明るい色あいのなかに暗めや無彩色なニュートラルカラーを補色にすると良いでしょう。

濃い色は、ソフトで暗い色合いに比べ、異なる雰囲気や意味合いを表現します。紺色は感情の欠如にもつながり、ネオンブルーは創造性や陽気な雰囲気を演出します。

Image via Andrush

#8ad5eb

#8a54a2

#5954a4

#04254e

Luminous Lines

目次へ戻る

Image via Lunov Mykola

#fec748

#d92139

#aec33a

#253f58

Tropic Popsicles

目次へ戻る

Image via Klavdiya Krinichnaya

#33c7f7

#dfa0c8

#2c439b

#25255f

Distorted Abstraction

目次へ戻る

Image via Martyn Jandula

#eac1db

#a1268e

#9d1e31

#2c0136

Pops of Neon

目次へ戻る

Image via richchy

#c7c5b8

#38618f

#fd9735

#ff6745

Rainy Views

目次へ戻る

Image via John Charboneau

#fec804

#f26322

#7a2d59

#181b46

Arizona Sunsets

目次へ戻る

Image via Rohappy

#eac9c0

#dab2d3

#9edae3

#65c4d8

Colorful Bloom

目次へ戻る

Image via Stephanie Frey

#ffd0d6

#b7dde0

#fee19f

#735b69

Pastel Pastries

目次へ戻る

Image via ViSnezh

#f6e0ae

#ffb312

#85cfb4

#ed186b

Meticulous Mandala

目次へ戻る

Image via Maciej Bledowski

#efc638

#416eb6

#715ca8

#2b103b

Cobalt Caves

目次へ戻る

Image via Catarina Belova

#f0bbc3

#10a44a

#fd8411

#877d7c

Bright Cityscape

目次へ戻る

Image via local_doctor

#ecec84

#ffb69b

#a299ca

#7ccaae

Luminous Bubbles

目次へ戻る

Image via Olga Max

#dad0ae

#f5e68b

#6bb6a1

#df6033

Poolside Waves

目次へ戻る

Image via Boris Stroujko

#fed770

#f29f8f

#fb7552

#076a67

Italian Dwellings

目次へ戻る

Image via DigitalDesign0770

#a9dfed

#edb6e8

#84c0e9

#37419a

Vivid Overlays

目次へ戻る

Image via Fotana

#fce53d

#ffa614

#ca4026

#7e1331

Sunny Scallops

目次へ戻る

Image via Mica C Olinghouse

#f5c9ca

#aad4ec

#f5ce45

#ca664e

Pastel Patios

目次へ戻る

Image via Katya Havok

#ffe246

#f4a5a1

#1abcbd

#014254

Vibrant Vibes

目次へ戻る

Image via casanisa

#f9e54e

#f8981d

#e12e4b

#5bbdc8

Crisp Citrus

目次へ戻る

Image via s74

#bcc74f

#f38f3a

#712333

#3b3a73

Hot Chili

目次へ戻る

Image via Foxys Forest Manufacture

#b1dade

#f4ad45

#ad184f

#496a23

Tea Party

目次へ戻る

Image via Tithi Luadthong

#ffec73

#77bca9

#f78e1e

#015077

Rainbow Reverie

目次へ戻る

Image via Yuri Kabantsev

#edc9e0

#ffb42a

#ee1d47

#742063

Acrylic Madness

目次へ戻る

Image via Katya Havok

#faa98b

#e6aecf

#aee0dd

#01acbd

Fresh Spring

目次へ戻る

Image via alphaspirit

#bedae5

#eecb27

#e13239

#1f1762

Summer Getaway

目次へ戻る

Image via flovie

#f2f3af

#ffd84f

#d74126

#50a0c3

Bohemian Motif

目次へ戻る

Image via welcomia

#ffbdb0

#fc801c

#bb496b

#311418

Coral Anemone

目次へ戻る

Image via Narupon Nimpaiboon

#ffdd00

#f15a22

#5fad46

#478fcd

Striking Macaw

目次へ戻る

Image via LaraP

#ffb630

#f4c5d7

#ff445f

#6f925a

Spring Fling

目次へ戻る

暖色系カラーパレット（英: Warm Tones）

暖かい色合いには、赤やオレンジ、黄色の3食の組み合わせが含まれています。寒色系カラーパレットの落ち着いてリラックスした印象とは対照的に、これらの刺激的な色合いは幸福や楽観的な印象を表現します。鮮やかな配色になる傾向があるので、適度に暖かい色合いを調整するか、寒色系カラーパレットと組み合わせて、より自然でナチュラルなバランスを演出するよう心がけましょう。

Image via SAHACHATZ

#f2af1d

#ee6a22

#d3d6c3

#5a5c4f

Koi Pond

目次へ戻る

Image via Moustache Girl

#fec6ad

#a2b75c

#fe6323

#1f1f29

Japanese Gardens

目次へ戻る

Image via Zamurovic Photography

#ffb53c

#eeb3a3

#f3553c

#642a02

Citrus Punch

目次へ戻る

Image via Elena Veselova

#ffe083

#e99a24

#2b3c1a

#171516

Mango Dream

目次へ戻る

Image via Africa Studio

#a5a79a

#eca442

#ca2521

#61120e

Wood Fired

目次へ戻る

Image via Mariusz Szachowski

#d8b484

#b16b2f

#c76331

#9a3513

Terracotta Marble

目次へ戻る

Image via Irina Alexandrova

#cc5b3b

#982827

#92617e

#3c1832

Lush & Luxurious

目次へ戻る

Image via Lisovskaya Natalia

#b2a59f

#023459

#1e646e

#002c2f

Sushi Platter

目次へ戻る

Image via Nature Bird Photography

#fef0bf

#f3b749

#655c57

#2e1e11

Bird in the Shadows

目次へ戻る

Image via Andreas G. Karelias

#e5d1ac

#ef6e2c

#61271c

#2c413c

Rustic & Traditional

目次へ戻る

Image via Behling

#9ab878

#f2de99

#e98d24

#252839

Butterfly Bliss

目次へ戻る

Image via Galyna Andrushko

#867182

#f2d3c1

#d36d3d

#b12c25

Adventurous Reds

目次へ戻る

補色系カラーパレット（英: Complementary）

補色的なカラーパレットは、カラーホイール上で反対側にある色合いを含みます。赤と緑や、青とオレンジ、黄色とむらさき色などが代表的です。矛盾したようなこの声質は、色の組み合わせをより複雑で、困難にしますが、うまく組み合わせすることで、デザインにとって重要なはっきりとしたコントラストを、効果的に演出することができます。

Image via Alena Ozerova

#dfe4de

#126f80

#f95151

#525e76

Fitness Sportswear

目次へ戻る

Image via Nattle

#e8c7b6

#eb9772

#676477

#32435f

Textile Dyes

目次へ戻る

Image via Volodymyr Tverdokhlib

#ced7d4

#fcbe71

#e55c25

#608796

Rooftop Views

目次へ戻る

Image via Yulia Grigoryeva

#9e5165

#a51e22

#204b24

#0b2637

Pure Produce

目次へ戻る

Image via Mikadun

#feb75d

#55c9ea

#013b63

#000e2b

Mediterranean Marine

目次へ戻る

Image via leonori

#ee3239

#5eaa5f

#fece00

#9d6ab9

Juicy Fruits

目次へ戻る

Image via Magsi

#d2e0e9

#4579a0

#002130

#a35d22

Rusted Gates

目次へ戻る

Image via kovop58

#ffefa1

#ffb21a

#876363

#414b6f

Snow & Sunshine

目次へ戻る

Image via Prostock-Studio

#e6b6c2

#d4587a

#dc364c

#778633

Decorative Florals

目次へ戻る

Image via Yulia Plekhanova

#fed700

#1e9ad0

#7e2e0b

#9a6231

Buzzing Blooms

目次へ戻る

Image via Cozy Home

#596fb5

#fe7139

#928a99

#695d85

Rainy Day

目次へ戻る

Image via klom

#fbd1a7

#607178

#353c42

#01273c

Bakery Treats

目次へ戻る

Image via Jan Stria

#9ea2ab

#6d8db6

#ffcc71

#a16f3a

Tigers & Tundra

目次へ戻る

Image via Maglara

#9cb3c5

#586c50

#d5683d

#865b2e

Aged Arrangement

目次へ戻る

ずっと使える、デザインの基本まとめました。【2020年改訂版】

海外サイト Shutterstock Blog で公開された 101 Color Combinations to Inspire Your Next Design より許可をもらい、翻訳転載しています。

参照元リンク : 101 Color Combinations to Inspire Your Next Design – Shutterstock Blog