CSS 다양한 컬러 설정 값

css 기본색상 키워드 사용

CSS에서는 일부 기본 색상에 대해 키워드를 사용할 수 있다.
예를 들어, red, blue, green 같은 색상을 직접 명시할 수 있습니다.

p {
  color: blue;
}

기본 색상외 색상을 지정하는 주요 방법으로는 HEX, RGB, RGBA, HSL, HSLA 등이 있다

1. HEX 헥스 값

2. RGB 알쥐비 값

3. RGBA 알쥐비에이 값

4. HSL 에이치 에스엘 값

5. HSLA 에이치 에스엘 에이 값

1. HEX (Hexadecimal)

HEX 색상 코드는 RGB 값의 16진수 표현 이 방식은 웹에서 가장 널리 사용되며, 정확하고 일관된 색상 표현이 가능합니다.

p {
  color: #FF5733; /* 강렬한 주황색 */
}

2. RGB (Red, Green, Blue)

RGB는 빨강, 초록, 파랑의 각 색상 강도를 0에서 255 사이의 값으로 설정하여 색상을 만듭니다.

p {
  color: rgb(173, 216, 230); /* 밝은 파란색 */
}

3. RGBA (Red, Green, Blue, Alpha)

RGBA는 RGB 색상에 알파(투명도) 값을 추가한 형태입니다. 알파 값은 0(완전 투명)에서 1(완전 불투명) 사이입니다.

p {
  color: rgba(255, 0, 0, 0.5); /* 반투명 빨강 */
}

4. HSL (Hue, Saturation, Lightness)

HSL은 색상(색조), 채도, 밝기를 조절하여 색상을 설정합니다. 색조는 도(degree) 단위로, 채도와 밝기는 퍼센트로 표현됩니다.

p {
  color: hsl(120, 100%, 50%); /* 생기 있는 녹색 */
}

5. HSLA (Hue, Saturation, Lightness, Alpha)

HSLA는 HSL에 알파 채널을 추가한 형태로, 투명도도 조절할 수 있습니다.

p {
  color: hsla(120, 100%, 50%, 0.5); /* 반투명 녹색 */
}