> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/css/develop-guide/color.md). # 색상(color) ## 색상(Color) CSS에서는 색상을 설정하기 위한 다양한 방법을 제공한다. * 색상 키워드 * RGB * RGBA * Hex String * HSL {% hint style="info" %} Mozilla Web Developer 문서 보기 {% endhint %} ### 색상 키워드 지정된 색상에 대해서 키워드를 이용하여 설정할 수 있다. * CSS Level 1 * black * silver * gray * white * maroon * red * purple * fuchsia * green * lime * olive * yellow * navy * blue * teal * aqua * CSS Level 2 * orange * CSS Color Module Level 3 * aliceblue * antiquewhite * aquamarine * azure * beige * bisque * blanchedalmond * blueviolet * brown * burlywood * cadetblue * chartreuse * chocolate * coral * cornflowerblue * cornsilk * crimson * cyan(aqua) * darkblue * darkcyan * darkgoldenrod * darkgray / darkgrey * darkgreen * darkhaki * darkmagenta * darkolivegreen * darkorange * darkorchid * darkred * darksalmon * darkseagreen * darkslateblue * darkslategray / darkslategrey * darkturquoise * darkviolet * deeppink * deepskyblue * dimgray / dimgrey * dodgerblue * firebrick * floralwhite * forestgreen * gainsboro * ghostwhite * gold * goldenrod * greenyellow * grey(gray) * honeydew * hotpink * indianred * indigo * ivory * khaki * lavender * lavenderblush * lawngreen * lemonchiffon * lightblue * lightcoral * lightcyan * lightgoldenrodyellow * lightgray / lightgrey * lightpink * lightsalmon * lightseagreen * lightskyblue * lightslategray / lightslategrey * lightsteelblue * lightyellow * limegreen * linen * magenta(fuchsia) * mediumaquamarine * mediumblue * mediumorchid * mediumpurple * mediumsegreen * mediumslateblue * mediumspringgreen * mediumturquoise * mediumvioletred * midnightblue * mintcream * mistyrose * moccasin * navajowhite * oldlace * olivedrab * orangered * orchid * palegoldenrod * palegreen * paleturquoise * palevioletred * papayawhip * peachpuff * peru * pink * plum * powderblue * rosybrown * royalblue * saddlebrown * salmon * sandybrown * seagreen * seashell * sienna * skyblue * slateblue * slategray / slategrey * snow * springgreen * steelblue * tan * thistle * tomato * turquoise * violet * wheat * whitesmoke * yellowgreen * CSS Color Module Level 4 * rebeccapurple * ETC * transparent * currentColor #### transperent `transparent` 색상은 **투명**하게 설정할 경우 사용한다. CSS Color Module Level 3부터 정의되어 사용할 수 있게 되었다. #### currentColor currentColor 색상은 외부에 설정된 색상을 상속하여(그대로 가져와서) 설정할 수 있도록 지원한다. ### RGB `RGB` 색 모형은 빛의 삼원색(Red / Green / Blue)을 이용하여 색을 표현하는 방식이다. ![](https://4208234536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_TNZwLuHV9ipYLbvRq%2Fuploads%2FJi45b0V2v37JgAslcJtP%2Fimage.png?alt=media\&token=8ad276ed-a8f7-4113-acc5-4c1ec3097aa5) **빛**이기 때문에 섞일 수록 밝아지는 특징을 가지고 있다. 빨강, 초록, 파랑 후레시를 어두운 벽에 비추는 개념으로 이해하면 좀 더 이해하기 쉽다. 각각의 색상 강도는 0부터 255까지 설정할 수 있다. * white = rgb(255, 255, 255) * black = rgb(0, 0, 0) 따라서 흰색은 모든 빛을 가장 밝게 비춘 색상이 되고, 검정색은 모든 빛을 가장 어둡게 비춘 색상이 된다. 각각의 색상을 조합하여 다양한 색을 만들어낼 수 있다. ### RGBA `RGBA` 는 `RGB` 색 모형에 Alpha(투명)이 추가된 형태의 색상 표현 방식을 의미한다. Alpha는 각 화소가 얼마나 투명한지를 나타내며 0부터 1 사이의 실수로 설정할 수 있다. RGB 색상은 RGBA 에서 Alpha를 1로 설정한 것과 같으며, Alpha가 낮을 수록 투명해진다. ### Hex String `Hex String`은 `RGB` 또는 `RGBA`를 16진수로 표기하는 방식이다. * 맨 앞은 #로 시작한다. * 모든 값은 두 자리로 표기한다. * `0`은 `00`으로 표기한다. * `255`는 `FF`로 표기한다. * `rgb(255, 255, 255)`는 `#FFFFFF`와 같다. * `rgba(255, 255, 255, 0)`은 `#FFFFFF00`과 같다. ### HSL `HSL`은 Hue(색조), Saturation(채도), Lightness(명도)를 이용하여 색상을 표기하는 방식이다. 과거에는 Alpha를 지정할 수 있도록 HSL과 HSLA가 따로 존재했으나 통합되었다. * Hue(색조)는 색상환에서의 정도를 나타내며 0부터 360까지 각도로 설정할 수 있다.(0은 360과 같다) * Saturation(채도)는 색상의 선명도를 나타내며 0%부터 100%까지 설정할 수 있다. * 100%는 가장 선명한 원본 색상을 의미한다. * 0%는 기존의 색상이 사라진 회색조 색상을 의미한다. * Lightness(명도)는 색상에 설정된 빛의 강도를 나타내며 0%부터 100%까지 설정할 수 있다. * 100%는 최대치로 밝게 만든 색상이므로 흰색을 의미한다. * 0%는 빛이 개입되지 않았음을 나타내므로 검정색을 의미한다. ### Color Palette 자주 사용하는 색상이나 어울리는 색상을 찾는 것은 쉬운 일이 아니다. 이러한 작업들을 손쉽게 해줄 수 있는 사이트들이 많이 존재한다. 아래 사이트들을 참고하면 좀 더 나은 색상 배합을 구현할 수 있다. {% embed url="" %} {% embed url="" %} {% embed url="" %}