CSS 기초 #3 (color)

RGB & RGBA

 

RGB (Red, Green, Blue) 는 색을 빨강(R), 초록(G), 파랑(B) 의 세 가지 색상을 조합하여 표현하는 색 모델입니다. 각 색상 값은 0에서 255 사이의 값으로 표현됩니다. 예를 들어, RGB 값이 (255, 0, 0)이라면 빨간색을 의미합니다.

 

RGBA는 RGB 색상에 투명도(Alpha) 값을 추가한 형태입니다. 투명도 값은 0 (완전 투명)부터 1 (불투명) 사이의 값을 가집니다. a는 alpha를 나타내며, 이 값으로 색의 투명도를 조절할 수 있습니다.

• red: 빨간색의 강도 (0~255)
• green: 초록색의 강도 (0~255)
• blue: 파란색의 강도 (0~255)
• alpha: 투명도 값 (0~1)   
  • 0: 완전 투명
  • 1: 완전 불투명

p {
    color: rgb(255, 0, 0);  /* 빨간색 */
}

h1 {
    color: rgb(0, 255, 0);  /* 초록색 */
}

div {
    background-color: rgb(0, 0, 255);  /* 파란색 */
}



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

div {
    background-color: rgba(0, 255, 0, 0.2);  /* 투명한 초록색 배경 */
}

 

 

 

HSL (Hue, Saturation, Lightness)은 색상, 채도, 밝기를 기준으로 색을 정의하는 색 모델입니다. HSL은 RGB보다 직관적이고 자연스러운 색 표현 방식입니다. HSL의 각 요소는 색상(Hue), 채도(Saturation), 밝기(Lightness)로 나뉩니다.

 

HSL 값은 hsl() 함수로 정의됩니다. 색상(Hue)은 각도로 표현되고, 채도(Saturation)와 밝기(Lightness)는 백분율(%)로 나타냅니다. 

 

HSLA는 HSL 색상 모델에 투명도(Alpha) 값을 추가한 형태입니다. a는 alpha 값으로, 색상의 투명도를 조절할 수 있습니다. 값은 0 (완전 투명)부터 1 (불투명)까지 설정됩니다.

• hue: 색상의 각도 (0~360°)
  • 0°: 빨간색
  • 120°: 초록색
  • 240°: 파란색
  • 360°: 빨간색 (다시 돌아옵니다)
• saturation: 채도 (0%~100%) – 색의 선명도를 정의합니다. 0%는 회색, 100%는 최대 채도를 나타냅니다.
• lightness: 밝기 (0%~100%) – 0%는 검정, 100%는 흰색을 나타냅니다.
• alpha: 투명도 값 (0~1)
  • 0: 완전 투명
  • 1: 완전 불투명

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

h1 {
    color: hsla(120, 100%, 50%, 0.3);  /* 투명한 초록색 */
}

div {
    background-color: hsla(240, 100%, 50%, 0.7);  /* 반투명 파란색 */
}

 

 

 

 

 

 

 

 

 

색상 코드

/* 색상 이름 */
p {
  color: red;
}

/* Hex 코드 */
p {
  color: #ff5733; /* 주황색 */
}

/* RGB */
p {
  color: rgb(255, 87, 51); /* 주황색 */
}

/* RGBA */
p {
  color: rgba(255, 87, 51, 0.5); /* 반투명 주황색 */
}

/* HSL */
p {
  color: hsl(9, 100%, 60%); /* 주황색 */
}

 

 

 

실습

 

See the Pen CSS color by Cheolho Jang (@chiro-J) on CodePen.