실행 가능한 CSS 문서: CSS 색상

Q: CSS는 어떤 색 형식을 지원하나요?

색 이름(red), hex(#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), 그리고 키워드 transparent와 currentColor예요. 일상적인 작업은 hex, rgb, hsl로 거의 다 해결돼요.

Q: rgb와 rgba는 무엇이 다른가요?

이제는 차이가 없어요. rgba()는 옛 별칭이에요. 현재 CSS에서는 rgb()도 알파 값(rgb(37 99 235 / 50%))을 받고, 모든 최신 브라우저에서 두 함수가 같은 인수를 받아요.

Q: CSS에서 색을 투명하게 만들려면 어떻게 하나요?

알파 채널을 추가해요. rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), 또는 #2563eb80 같은 8자리 hex예요. opacity와 달리 요소 전체가 아니라 그 색 하나만 흐려져요.

Q: currentColor는 무슨 뜻인가요?

요소의 color 속성 값이에요. 테두리나 SVG fill에 쓰면 글자 색을 자동으로 따라가요.

CSS로 색을 쓰는 방법

색을 받는 모든 속성(color, background-color, border-color, 그림자, SVG fill)은 같은 형식을 받아요. 처음 네 견본은 같은 파란색을 네 가지 방법으로 쓴 것이고, 다섯 번째는 비슷한 색 이름이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

형식	예시	어울리는 곳
색 이름	`tomato`, `rebeccapurple`	빠른 테스트와 프로토타입
Hex	`#2563eb`, `#25e`	디자인 도구에서 복사하기
`rgb()`	`rgb(37 99 235)`	투명도 섞기, RGB 값으로 작업하기
`hsl()`	`hsl(221 83% 53%)`	한 색의 어두운 색조와 밝은 색조 만들기
`oklch()`	`oklch(55% 0.2 262)`	체감 명도가 고른 팔레트
키워드	`transparent`, `currentColor`	아래 섹션을 보세요

Hex 색

hex 색은 # 뒤에 빨강, 초록, 파랑을 각각 00부터 ff까지 16진수 두 자리로 적어요. 세 가지 형태는 줄임이나 확장이에요.

#rgb: 각 자리가 두 번 반복돼서 #25e는 #2255ee예요.
#rrggbbaa: 마지막 두 자리가 알파라서 #2563eb80은 약 50% 불투명해요.
#rgba: 알파가 있는 짧은 형태예요.

hex는 대소문자를 구분하지 않아요. #2563EB와 #2563eb는 같은 색이에요.

rgb()와 rgba()

rgb()는 빨강, 초록, 파랑을 0에서 255(또는 0%에서 100%)까지 받아요. 슬래시 뒤의 선택적인 네 번째 값은 알파이고, 0(보이지 않음)에서 1, 또는 0%에서 100%예요.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

이제 rgba()와 rgb()는 같은 함수예요. 둘 다 두 문법과 선택적인 알파를 받아요. 옛 코드는 투명도가 필요할 때 rgba()를 쓰고, 그대로 잘 동작해요.

hsl(): 가장 조절하기 쉬운 형식

hsl()은 사람이 색을 생각하는 방식으로 색을 표현해요. 색상환의 색상, 채도, 명도예요. 색상은 그대로 두고 명도만 바꾸면 단계 전체를 얻을 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

첫 번째 줄은 색상 221, 채도 83%를 유지하고 명도만 바꿔요. 두 번째 줄은 같은 채도와 명도로 색상환을 한 바퀴 돌아요.

투명도: 알파와 opacity

알파 채널은 색 하나를 비쳐 보이게 해요. opacity는 텍스트와 자식을 포함한 요소 전체를 비쳐 보이게 해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent는 완전히 투명한 검정, rgb(0 0 0 / 0)의 키워드예요. 대부분 요소의 기본 배경이에요.

currentColor

currentColor는 요소 자신의 color와 같아요. 테두리, 아이콘, 텍스트가 모두 이걸 쓰는 버튼은 선언 하나로 전부 바뀌어요.

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

테두리는 이미 기본값이 currentColor예요. 그래서 색 없이 border: 2px solid만 써도 글자 색과 같아요.

아무 색이나 넣어 보기

어떤 형식이든 색을 입력해 보세요. 브라우저가 해석해서 계산한 값을 보여 주고, 잘못된 색이면 견본이 바뀌지 않아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150), color-mix(in srgb, #2563eb, white 50%)를 넣어 보세요.

새로운 색 함수

oklch(L C H): 명도, 채도(chroma), 색상을 같은 명도가 똑같이 밝아 보이도록 설계된 공간에서 표현해요. 이걸로 만든 팔레트는 HSL 팔레트보다 탁한 중간 단계가 적어요.
color-mix(in srgb, A, B 30%): 두 색을 섞어요. white나 black과 섞으면 브랜드 색 하나로 밝은 색조와 어두운 색조를 만들 수 있고, CSS 변수와도 동작해요. color-mix(in srgb, var(--brand), white 80%)

둘 다 최신 Chrome, Firefox, Safari에서 동작해요. 브랜드 색은 CSS 변수에 두어서 고른 형식이 한곳에 모이게 하세요.

자주 하는 실수

hex 색에 # 빠뜨리기. color: 2563eb는 잘못된 값이라 무시돼요.
배경을 투명하게 하려고 opacity 쓰기. 텍스트도 흐려져요. 알파 색을 쓰세요.
최신 문법에서 구분자 섞기. rgb(37 99, 235)는 잘못된 값이에요. 전부 공백이나 전부 쉼표로 쓰세요.
색 이름이 디자인과 맞을 거라고 가정하기. royalblue는 #2563eb가 아니에요. 정확한 코드를 복사하세요.
명도 대비를 눈으로 판단하기. 대비 검사 도구로 배경과 글자 색을 확인하세요. 본문 텍스트는 최소 4.5:1이에요.

자주 묻는 질문

CSS는 어떤 색 형식을 지원하나요?

색 이름(red), hex(#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), 그리고 키워드 transparent와 currentColor예요. 일상적인 작업은 hex, rgb, hsl로 거의 다 해결돼요.

rgb와 rgba는 무엇이 다른가요?

이제는 차이가 없어요. rgba()는 옛 별칭이에요. 현재 CSS에서는 rgb()도 알파 값(rgb(37 99 235 / 50%))을 받고, 모든 최신 브라우저에서 두 함수가 같은 인수를 받아요.

CSS에서 색을 투명하게 만들려면 어떻게 하나요?

알파 채널을 추가해요. rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), 또는 #2563eb80 같은 8자리 hex예요. opacity와 달리 요소 전체가 아니라 그 색 하나만 흐려져요.

CSS의 HSL은 무엇인가요?

색상(hue), 채도(saturation), 명도(lightness)예요. 색상은 색상환의 각도(0 빨강, 120 초록, 240 파랑), 채도는 얼마나 선명한지, 명도는 0% 검정에서 100% 흰색까지예요. 마지막 숫자만 바꾸면 되니 더 밝거나 어두운 색조를 만들기 쉬워요.

currentColor는 무슨 뜻인가요?

요소의 color 속성 값이에요. 테두리나 SVG fill에 쓰면 글자 색을 자동으로 따라가요.