튜토리얼

CSS와 디자인 시스템의 색상 명명 규칙

7분 읽기

색상 명명은 디자인 시스템에서 겉으로는 단순해 보이지만 의외로 복잡한 문제입니다. 소규모 프로젝트에서는 거의 문제가 되지 않습니다. 스타일시트에 몇 개의 헥스 코드만 넣으면 관리할 수 있습니다. 하지만 팀 규모로 확장되면, 여러 개발자, 디자이너, 자동화 도구가 모두 동일한 팔레트를 참조하게 되므로 명명 규칙이 핵심 인프라가 됩니다. 잘못된 명명 체계는 불일치를 초래하고, 디자인 파일과 코드 사이의 괴리를 만들며, 비용이 많이 드는 리팩터링으로 이어집니다. 이 가이드는 색상 명명 방식의 전체 영역, 각 방식의 트레이드오프, 그리고 프로젝트에 맞는 올바른 전략을 선택하는 방법을 다룹니다.

CSS 이름 색상: 148개의 표준

CSS에는 모든 브라우저가 헥스 코드 없이 이해하는 148개의 이름 색상이 포함되어 있습니다. 이 이름들은 red, green, blue와 같은 명확한 표준부터 역사적인 특이 사례들, 예를 들어 rebeccapurple(2014년에 사망한 웹 개발자를 기리기 위해 추가됨)과 유닉스 그래픽 환경에서 원래 사용된 완전한 X11 세트까지 다양합니다.

몇 가지 예시를 살펴봅시다:

CSS 이름 헥스 비고
rebeccapurple #663399 CSS 4에서 추가됨, Rebecca Meyer를 기리기 위해 명명
cornflowerblue #6495ED X11 계열, UI 기본값으로 자주 사용
darkslategray #2F4F4F 참고: gray와 grey 모두 허용
mediumaquamarine #66CDAA X11 시대의 복합 이름
papayawhip #FFEFD5 X11 목록에서 CSS 1에 추가됨
aliceblue #F0F8FF Alice Roosevelt Longworth의 이름을 딴 색상

이 이름들은 문서화, 프로토타이핑, 가독성이 정밀도보다 중요한 소규모 유틸리티 스타일에서 유용합니다. 하지만 디자인 시스템 작업에는 상당한 한계가 있습니다:

  • 이름이 색조는 전달하지만 명도나 채도는 전달하지 않습니다. lightblue(#ADD8E6)와 skyblue(#87CEEB)는 서로 체계적인 관계가 없는 별개의 헥스 값입니다.
  • 스케일을 형성하지 않습니다. blue에서 약간 더 어두운 파란색으로 이동하는 예측 가능한 패턴이 없습니다.
  • 브랜드별 이름(navy, teal, coral)은 브랜드의 의도된 의미와 충돌할 수 있는 문화적 연상을 담고 있습니다.
  • 148개의 전체 이름 목록은 암기할 수 없어서, 팀원마다 동일하다고 생각하는 색상에 다른 이름을 사용할 가능성이 높습니다.

간단한 프로토타이핑 이상의 작업에는 CSS 이름 색상을 아래의 구조적 명명 방식 중 하나로 교체하세요.

CSS 커스텀 속성을 사용한 시맨틱 명명

시맨틱 명명은 색상 변수를 시각적 외관이 아닌 UI에서의 목적에 연결합니다. --blue-500 대신 --color-primary를 정의합니다. --gray-200 대신 --color-background-subtle을 정의합니다.

시맨틱 레이어 패턴

잘 구성된 시맨틱 팔레트는 두 개의 레이어를 가집니다. 기본 레이어는 설명적 이름을 원시 헥스 값에 매핑합니다:

/* 기본 팔레트 — 컴포넌트에서 직접 사용하지 않음 */
:root {
  --blue-50:   #EFF6FF;
  --blue-100:  #DBEAFE;
  --blue-500:  #3B82F6;
  --blue-600:  #2563EB;
  --blue-900:  #1E3A8A;

  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-700:  #374151;
  --gray-900:  #111827;
}

시맨틱 레이어는 기본 값을 참조하고 목적 기반 이름을 할당합니다:

/* 시맨틱 팔레트 — 모든 컴포넌트 스타일에서 사용 */
:root {
  --color-primary:           var(--blue-500);
  --color-primary-hover:     var(--blue-600);
  --color-primary-subtle:    var(--blue-50);

  --color-background:        var(--gray-50);
  --color-surface:           #FFFFFF;
  --color-text:              var(--gray-900);
  --color-text-muted:        var(--gray-700);
  --color-border:            var(--gray-200);
}

이 이중 레이어 접근 방식의 장점은 다크 모드 유연성입니다. 테마를 전환하려면 시맨틱 레이어만 재정의하면 됩니다. 기본 색상은 그대로 유지됩니다:

[data-theme="dark"] {
  --color-primary:       var(--blue-400); /* 어두운 배경에 더 밝은 색조 */
  --color-background:    var(--gray-900);
  --color-surface:       var(--gray-800);
  --color-text:          var(--gray-50);
  --color-text-muted:    var(--gray-400);
  --color-border:        var(--gray-700);
}

시맨틱 명명 분류 체계

다른 조직들은 다른 시맨틱 이름 구조를 사용합니다. 가장 일반적인 패턴은 역할 + 변형 구조를 사용합니다:

/* 역할: background, surface, border, text, icon, focus */
--color-background-base
--color-background-subtle
--color-background-inverse

/* 변형: default, subtle, strong, inverse */
--color-text-default
--color-text-subtle
--color-text-strong
--color-text-on-primary

또 다른 인기 있는 분류 체계는 인터랙션 상태를 분리합니다:

--color-interactive-default
--color-interactive-hover
--color-interactive-active
--color-interactive-disabled
--color-interactive-focus-ring

정확한 분류 체계보다 내부 일관성이 더 중요합니다. 하나를 선택하고 강제로 따르세요.

시맨틱 명명의 장점

  • 다크 모드가 간단합니다 — 시맨틱 변수를 재정의하면 모든 컴포넌트가 자동으로 업데이트됩니다
  • 한눈에 읽기 쉽습니다 — var(--color-text-muted)는 즉시 의도를 전달하지만 #6B7280은 그렇지 않습니다
  • 디자이너-개발자 정렬 — Figma도 토큰 기반 색상 명명을 지원합니다. 디자인 토큰 표준으로 동일한 이름이 두 도구에 나타날 수 있습니다
  • 리팩터링 안전성 — 기본 파란색을 변경하려면 변수 하나만 업데이트하면 됩니다. 다른 것은 변경할 필요가 없습니다

단점

  • 유지 관리에 규율이 필요합니다. 강제하지 않으면 개발자들은 하드코딩된 헥스로 돌아갑니다
  • 명명은 본질적으로 주관적입니다. --color-surface-raised와 --color-bg-elevated는 논쟁을 유발합니다
  • 지나치게 세분화된 시맨틱 이름은 아무 시스템도 없는 것만큼 관리하기 어려워집니다

스케일 명명: blue-500 규칙

스케일 명명(숫자 명명 또는 Tailwind 스타일 명명이라고도 함)은 목적을 완전히 무시하고 밝기 스케일 내의 위치에 집중합니다. 각 색상군은 이름과 숫자 범위를 가지며, 일반적으로 50에서 950까지 50 또는 100 단위로 증가합니다. 숫자가 클수록 더 어둡습니다.

/* 파란색 스케일 */
--blue-50:   #EFF6FF;  /* 파란색이 살짝 도는 흰색 */
--blue-100:  #DBEAFE;
--blue-200:  #BFDBFE;
--blue-300:  #93C5FD;
--blue-400:  #60A5FA;
--blue-500:  #3B82F6;  /* 중간점 — 최대 채도 */
--blue-600:  #2563EB;
--blue-700:  #1D4ED8;
--blue-800:  #1E40AF;
--blue-900:  #1E3A8A;
--blue-950:  #172554;  /* 파란색이 살짝 도는 검정 */

쉐이드 생성기는 이 유형의 스케일을 자동으로 생성합니다. 기본 헥스 값을 입력하면 지각적으로 균일한 단계를 사용하여 전체 50–950 범위를 계산하여 사용자 지정 브랜드 색상에 즉시 사용 가능한 스케일을 제공합니다.

스케일 규칙의 작동 방식

Tailwind CSS가 이 규칙을 대중화했으며 그 팔레트는 사실상 표준 구현입니다. 논리:

  • 50: 거의 흰색에 가까운 색조 — 호버 배경, 미묘한 표시기에 적합
  • 100–200: 밝은 색조 — 라이트 모드 배경, 배지 채우기에 적합
  • 300–400: 더 밝은 중간 색조 — 흰색 위의 테두리, 아이콘에 사용
  • 500: "순수한" 색조 — 이 색조에서 최대 채도, 정체성 색상
  • 600–700: 더 어두운 — 기본 인터랙션 상태(호버, 누른 버튼)
  • 800–900: 깊은 — 밝은 배경의 텍스트, 어두운 UI 크롬
  • 950: 거의 검정 — 고대비 텍스트, 다크 모드 기본 서피스

스케일 명명이 뛰어난 경우

스케일 명명은 유틸리티 우선 CSS 프레임워크와 기본 색상이 적용과 별도로 정의되는 디자인 시스템에서 빛납니다. 명시적입니다. blue-300과 blue-700 사이의 정확한 밝기 관계를 항상 알 수 있습니다. 새 색조를 추가할 때 명명에 대한 판단이 필요하지 않습니다.

주요 한계는 스케일 이름이 목적을 전달하지 않는다는 것입니다. var(--blue-600)을 사용하는 컴포넌트를 검토하면 그것이 텍스트 색상인지, 배경인지, 아이콘인지, 포커스 링인지 알 수 없습니다. 이러한 이유로 스케일 이름은 시맨틱 이름 아래의 기본 레이어로서 가장 잘 작동하며, 최종 소비자 facing API로는 적합하지 않습니다.

브랜드 색상 이름

브랜드 색상은 내부적으로 인식 가능하지만 일반 스케일에 깔끔하게 매핑되지 않는 이름이 필요하기 때문에 특별한 명명 과제를 제시합니다. 독특한 청록색을 기본 색상으로 가진 회사는 다음과 같을 수 있습니다:

/* 방법 1: 브랜드 이름 직접 사용 */
:root {
  --color-brand-teal:      #00897B;
  --color-brand-teal-dark: #00695C;
  --color-brand-gold:      #F59E0B;
}

/* 방법 2: 브랜드 이름 + 스케일 */
:root {
  --ocean-400: #26C6DA;
  --ocean-500: #00BCD4;
  --ocean-600: #00ACC1;
  --ocean-700: #0097A7;
}

/* 방법 3: 브랜드-역할 하이브리드 */
:root {
  --color-brand-primary:   #00897B;
  --color-brand-secondary: #F59E0B;
  --color-brand-neutral:   #607D8B;
}

주요 디자인 시스템은 다르게 선택합니다. Google의 Material Design은 md-sys-color-primary(역할 기반)를 사용합니다. Apple의 Human Interface Guidelines는 "Label"과 "System Blue"와 같은 시맨틱 이름을 사용합니다. IBM의 Carbon 시스템은 역할 이름을 사용합니다: $brand-01, $brand-02. Shopify Polaris는 --p-color-bg-interactive를 사용합니다.

색상 이름 잠금의 위험성

흔한 실수 중 하나는 시각적 외관에 따라 색상에 이름을 붙이는 것입니다: --color-teal, --color-orange. 브랜드가 새롭게 단장되기 전까지는 잘 작동하지만 그 청록색이 청록-녹색이 됩니다. 이제 코드베이스에서 --color-teal에 대한 모든 참조는 기저의 헥스가 변경되었음에도 시맨틱적으로 잘못된 것입니다.

가장 안전한 접근 방식은 브랜드 색상을 시각적 특성(--color-teal)이 아닌 역할(--color-primary)이나 브랜드별 추상 식별자(--color-horizon, --color-midnight)로 명명하는 것입니다. 역할 이름은 리브랜딩에서 살아남지만, 시각적 이름은 그렇지 않습니다.

팀을 위한 모범 사례

토큰 표준을 일찍 확립하세요

CSS를 작성하기 전에 공유 문서에서 명명 규칙을 정의하세요. 다음 질문에 답하세요:

  1. 시맨틱 이름, 스케일 이름, 또는 두 레이어 모두 사용하나요?
  2. 구분 기호는 무엇인가요: kebab-case(--color-text-primary) 또는 점 표기법(color.text.primary)?
  3. 상태(호버, 활성, 비활성화, 포커스)는 어떻게 처리하나요?
  4. 테마(다크 모드, 고대비 모드, 브랜드 테마)는 어떻게 처리하나요?

린터(Stylelint에는 커스텀 속성 명명을 위한 플러그인이 있음)로 강제되는 서면 표준은 깔끔한 시스템을 혼돈으로 바꾸는 점진적인 표류를 방지합니다.

Figma와 코드 사이에 디자인 토큰 동기화

W3C 디자인 토큰 커뮤니티 그룹은 JSON 기반 토큰 형식의 사양을 만들었습니다. Style Dictionary, Theo, Tokens Studio for Figma와 같은 도구를 사용하면 소스 진실 파일에서 색상을 한 번 정의하고 CSS 커스텀 속성, Tailwind 설정, iOS Swift 상수, Android XML을 동시에 생성할 수 있습니다.

최소한의 토큰 파일:

{
  "color": {
    "primary": { "$value": "#3B82F6", "$type": "color" },
    "primary-hover": { "$value": "#2563EB", "$type": "color" },
    "background": { "$value": "#F9FAFB", "$type": "color" },
    "text": { "$value": "#111827", "$type": "color" }
  }
}

Style Dictionary는 이것을 CSS 커스텀 속성, Tailwind 설정 또는 필요한 다른 형식으로 변환합니다.

팔레트를 제한하세요

가장 흔한 명명 시스템 실패 중 하나는 팔레트 확산입니다. 시스템이 6개의 색상으로 시작해서 60개로 끝나며, 그 중 많은 것이 헥스 자리 하나 또는 둘 차이의 약간 변형입니다. 최대 팔레트 크기를 강제하세요. 새 색상은 기존 색상을 교체하거나 새 시맨틱 역할을 정당화해야 합니다.

쉐이드 생성기를 사용하여 단일 기본 색상에서 전체 색조/쉐이드 범위를 생성하세요. 이렇게 하면 각 스케일이 수학적으로 일관성이 있고 수동으로 선택된 거의 중복 색상의 누적이 방지됩니다.

모든 이름을 문서화하세요

시스템의 모든 색상 변수는 의도된 용도에 대한 한 문장 설명이 있어야 합니다. 이 문서는 변수 정의 옆이나 전용 토큰 카탈로그에 있어야 합니다. 미래의 팀원들 — 그리고 미래의 자신 — 은 모든 컴포넌트 CSS를 읽지 않고도 "보조 버튼 테두리에 사용할 변수는 무엇인가?"에 답해야 할 것입니다.

/* --color-border-interactive
 * 기본(호버되지 않고 포커스되지 않은) 상태의 양식 필드,
 * 체크박스, 라디오 버튼, 선택 메뉴의 테두리.
 * 대비: --color-surface에 대해 3:1을 충족해야 함 (WCAG 비텍스트 임계값)
 */
--color-border-interactive: #D1D5DB;

린터를 사용하여 규칙을 강제하세요

stylelint-declaration-block-no-ignored-properties 플러그인이 있는 Stylelint는 기본 레이어 외부에서 사용된 원시 헥스 값을 잡을 수 있습니다:

{
  "rules": {
    "color-named": "never",
    "color-no-hex": [true, {
      "severity": "warning",
      "message": "원시 헥스 값 대신 디자인 토큰 팔레트의 CSS 커스텀 속성을 사용하세요."
    }]
  }
}

이 규칙은 color: var(--color-primary) 대신 사용된 color: #3B82F6와 같은 원시 색상 리터럴에 플래그를 표시합니다.

핵심 요약

  • CSS의 148개 이름 색상은 문서화와 빠른 프로토타이핑에는 유용하지만, 비체계적인 특성으로 인해 여러 팀원이 있는 디자인 시스템에는 부적합합니다.
  • 시맨틱 명명(--color-text-primary, --color-background-subtle)은 변수 이름을 UI에서의 목적에 연결하여 다크 모드 구현과 리팩터링을 간단하게 만듭니다.
  • 스케일 명명(blue-500, gray-200)은 각 색상 군 내에서 밝기 계층을 정의합니다. 쉐이드 생성기는 임의의 기본 헥스 값에서 이 스케일 생성을 자동화합니다.
  • 가장 강력한 시스템은 두 레이어를 모두 사용합니다: 원시 값의 기본 스케일 레이어와 기본 변수를 참조하여 컴포넌트에 목적 기반 이름을 노출하는 시맨틱 레이어.
  • 브랜드 색상은 리브랜딩에서 살아남기 위해 시각적 특성(--color-teal)이 아닌 역할(--color-primary)이나 추상 브랜드 식별자로 명명하세요.
  • 린터로 명명 규칙을 강제하고, 토큰 표준을 사용하여 디자인 도구와 코드 사이에 토큰을 동기화하며, 모든 변수의 의도된 사용을 문서화하세요.

관련 색상

aliceblue

#F0F8FF

black

#000000

blue

#0000FF

coral

#FF7F50

cornflowerblue

#6495ED

darkslategrey

#2F4F4F

gold

#FFD700

grey

#808080

관련 브랜드

Apple

Think different

3개 색상

Google

Organize the world's information

4개 색상

Figma

Nothing great is made alone

4개 색상

IBM

Let's create

1개 색상

Future

3개 색상

Hex

8개 색상

관련 도구

쉐이드 생성기

디자인 시스템을 위해 모든 기본 색상에서 Tailwind CSS 스타일의 쉐이드 스케일(50~950)을 생성합니다.

도구 열기