CSS 색상 및 투명도

    2018-02-28 20:16:12 작성

    색상

    color 속성은 요소의 콘텐츠의 색상입니다.
    background-color 속성은 요소의 배경색입니다.
    CSS 색상은 미리 정의된 색상의 이름 또는 HEX, RGB, HSL 그리고 투명값을 지정할 수 있는 RGBA, HSLA 값을 사용하여 지정합니다.
    값에 transparent 지정하면 투명하게 칠합니다.

    p {
        color: orange; /* 전경색 */
        background-color: pink; /* 배경색 */
    }

    색상 이름

    색상의 이름을 사용하여 색상을 지정할 수 있습니다.
    HTML은 140개의 표준 색상 이름을 지원합니다.
    white, blue, orange, pink, black 등등


    HEX
    #rrggbb

    16진수값으로 색상을 지정합니다.
    rr, gg, bb는 각각 red, green, blue입니다.
    값은 00~FF(0~255)까지의 16진수이며, 앞에 #을 붙여 표시합니다.


    RGB, RGBA
    rgb(red, green, blue)
    rgba(red, green, blue, alpha)

    rgb, rgba 함수로 색상을 지정할 수 있습니다.
    red, green, blue : 0 ~255 색상의 강도를 정의합니다.
    alpha : 0 ~ 1사이의 실수로 투명도를 지정합니다. 0은 투명이고 1은 불투명입니다.


    HSL, HSLA
    hsl(hue, saturation, lightness)
    hsla(hue, saturation, lightness, alpha)

    hsl, hsla 함수로 색상을 지정할 수 있습니다.
    hue : 색조를 나타내며 0~360의 색상환에 대한 정도입니다.
    0은 빨간색, 120은 녹색, 240은 파란색 입니다.
    saturation : 0% ~ 100% 채도를 나타냅니다.
    lightness : 0% ~ 100% 명도를 나타냅니다. alpha : 0 ~ 1사이의 실수로 투명도를 지정합니다.


    색상 선택기
    black
    #000000
    rgb(0,0,0)
    RGBA
    • RED
      0
    • GREEN
      0
    • BLUE
      0
    • ALPHA
      0

    transparent

    transparent 값은 색상을 투명하게 칠합니다.


    opacity

    opacity 속성은 요소의 투명도를 지정합니다.
    0 ~ 1 사이의 실수로 투명도를 지정합니다.