배색 모르겠어! 디자인 모르겠다!

요즈음, 도내의 카페에서 조금 귀를 곁들인다면 부업으로 web엔지니어나 web디자이너가 된다! ! 라는 이야기가 들립니다.

그런 돌출 웹 만들기 맨이 색채로 머리를 안는 시간을 바로 가기 위해 교과서를 타고있는 정도의 색상 조합과 그 구현 방법을 쓸 수 있다고 생각합니다.

※ 독학 지식을 정리했을 뿐이므로, 실수나 부적절한 표현등이 있으면, 코멘트로 가르쳐 주시면 도움이 됩니다.

Sass는 우수

Sass (Syntactically Awesome Stylesheets)에서는 메인 컬러를 바탕으로
색조(Hue), 채도(Saturation), 휘도(Lightness)를 따를 수 있다.

색 구성표

그러면 해설해 갑니다.
참고 소스로서, 가장 마지막에 서적을 게재하고 있습니다.

모노크로매틱(동일색상배색)

색조 고리에서 하나의 색만을 선택하여 밝기 또는 채도를 변경하는 배색 방법.

scss

/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* 明度 */
.lighten10 { background: lighten($main_color, 10%); }
.darken10 { background: darken($main_color, 10%); }

/* 彩度 */
.saturate10 { background: saturate($main_color, 30%); }
.desaturate10 { background: desaturate($main_color, 30%); }

다이아드(보색색 상배색)

보색(색상환의 정반대측의 색)과의 조합은 콘트라스트가 명확하게 붙어 있으므로, 악센트를 붙이고 싶을 때 등에 좋다.

scss

/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* 補色 */
.complement { background: complement($main_color); }

트라이어드

색조환으로 정삼각형을 묶어 만드는 배색.
아이용 장난감이나 브랜드에서 자주 보이는 '빨강, 노랑, 파랑'의 배색은 원색(섞어서 만들 수 없는 색)의 조합으로 프라이머리 트라이어드라고 불린다.
그 이외의 트라이어드의 조합은, 세컨더리 트라이어드라고 말하는 것 같다.

scss

/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* トライアド */
.deg120 { background: adjust-hue($main_color, 120deg); }
.deg240 { background: adjust-hue($main_color, 240deg); }

아날로그(유사색 상배색)

색상 링에서 연속적으로 인접한 색상을 결합하는 방법.
공통의 색을 기조로 가지고 있기 때문에, 조화가 취해진 조합이 된다.

scss

/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* アナログ */
.deg30 { background: adjust-hue($main_color, 30deg); }
.deg330 { background: adjust-hue($main_color, 330deg); }

스플릿 컴플리멘터리(분열 보색 배색)

색조 고리에서 보색의 두 인접 색조가 사용됩니다.
눈을 끄는 배색하면서 제대로 조화를 유지하기 때문에, 메인 + 보색의 "2 색"에서는 부족한 경우에 스플릿 컴플리멘터리를 채용하는 것도 좋을지도.

scss

/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* スプリットコンプリメンタリー */
.complement30 { background: adjust-hue(complement($main_color), 30deg); }
.complement330 { background: adjust-hue(complement($main_color), 330deg); }

테트라드(4색 배색)

색조환을 정사각형으로 묶은 배색.
2조의 보색 관계로 완성되므로, 활기찬 인상이 된다.

scss

/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* テトラード */
.deg90 { background: adjust-hue($main_color, 90deg); }
.deg180 { background: adjust-hue($main_color, 180deg); }
.deg270 { background: adjust-hue($main_color, 270deg); }

참고

비 디자이너 디자인 북

모든 사람에게 알고 싶으면 색 구성표의 기본 원칙

웹 디자인 양질 견본장