포용적인 피부색 컬러 팔레트 (HEX 코드 및 디자인 가이드)
정확한 HEX 코드를 포함한 인간 피부색의 포괄적인 팔레트입니다. 인류의 아름다운 다양성을 나타내는 포용적인 디자인을 만드는 데 완벽합니다.
포용적인 피부색 팔레트가 중요한 이유
디자인에서 재현(Representation)은 중요합니다. 캐릭터 아트를 만들거나, 포용적인 아바타를 개발하거나, 화장품을 제형화하거나, 의학 일러스트레이션을 디자인할 때 정확한 피부색을 사용하는 것은 여러분의 작업이 다양한 관객에게 공감을 불러일으키도록 보장합니다.
이 팔레트는 자외선에 대한 반응에 따라 인간의 피부 유형을 분류하는 피부과 표준인 피츠패트릭 척도(Fitzpatrick Scale)를 기반으로 합니다. 이는 인간 피부색의 전체 스펙트럼을 표현하는 가장 과학적으로 정확한 방법입니다.
디자인 활용 사례
- ▶캐릭터 디자인 및 게임 개발
- ▶메이크업 및 파운데이션 쉐이드 매칭
- ▶UI/UX 아바타 및 프로필 사진 디자인
- ▶의학 및 교육용 일러스트레이션
전체 피부색 팔레트 (피츠패트릭 척도)
인간의 다양성 전체 스펙트럼을 아우르는 6가지 과학적으로 정확한 피부색입니다.
포슬린 / 매우 밝은 톤 (Porcelain / Very Fair)
Type I가장 밝은 피부톤으로, 자외선에 항상 화상을 입으며 태닝이 되지 않습니다.
페어 / 밝은 톤 (Fair / Light)
Type II밝은 피부톤으로, 자외선에 쉽게 화상을 입고 태닝이 거의 되지 않습니다.
라이트 미디엄 (Light Medium)
Type III밝은색에서 중간색 사이의 피부톤으로, 가끔 화상을 입으며 점진적으로 태닝됩니다.
미디엄 / 올리브 (Medium / Olive)
Type IV중간색에서 올리브빛 피부톤으로, 화상을 거의 입지 않으며 쉽게 태닝됩니다.
미디엄 브라운 (Medium Brown)
Type V갈색 피부톤으로, 화상을 극히 드물게 입으며 매우 쉽게 태닝됩니다.
다크 브라운 / 딥 (Dark Brown / Deep)
Type VI가장 어두운 피부톤으로, 자외선에 화상을 입지 않으며 색소가 깊게 침착되어 있습니다.
확장된 피부색 스펙트럼
더 섬세한 표현을 위해, 중간 쉐이드를 포함한 확장된 범위를 소개합니다:
피부색을 위한 보색 계열
이 보색들은 메이크업, 패션 및 디자인 프로젝트에서 피부색과 아름답게 조화를 이룹니다:
웜 블러쉬 (Warm Blush)
볼 색상, 따뜻함
내추럴 립 (Natural Lip)
입술 톤, 자연스러운 아름다움
소프트 하이라이트 (Soft Highlight)
하이라이터, 광택
다크 컨투어 (Dark Contour)
컨투어, 깊이감
피부색 디자인을 위한 베스트 프랙티스
재현의 다양성
디자인에 항상 다양한 피부색을 포함하세요. 캐릭터 선택이나 아바타 시스템에서 최소한 6가지 피츠패트릭 유형을 모두 재현하는 것이 좋은 기준입니다.
고정관념 피하기
특정 피부색을 특정 역할, 직업 또는 성격 특성과 연관 짓지 마세요. 피부색은 캐릭터 정체성의 한 측면일 뿐, 결정적인 특징이 되어서는 안 됩니다.
다양한 맥락에서 테스트
피부색은 조명, 주변 색상, 그리고 디스플레이 설정에 따라 다르게 보일 수 있습니다. 항상 여러 맥락과 환경에서 선택한 색상을 테스트하세요.
언더톤 고려
실제 피부색은 쿨톤, 웜톤 또는 뉴트럴 언더톤을 가지고 있습니다. 현실적인 재현을 위해 베이스 피부색 아래에 미묘한 분홍색, 노란색 또는 파란색 색조를 레이어링하는 것을 고려해 보세요.
CSS 피부색 그라데이션 코드
포용적인 디자인을 위한 자연스러운 피부 원색 효과를 위해 다음 CSS 그라데이션을 복제하여 사용하세요:
자연스러운 피부색 그라데이션 (밝은 톤에서 어두운 톤)
background: linear-gradient(
90deg,
#FFE5D9 0%,
#EBC4AF 50%,
#8D5524 100%
);미디엄 피부색 스펙트럼
background: linear-gradient(
135deg,
#F5D0C5 0%,
#EBC4AF 25%,
#D4A574 50%,
#C68642 75%,
#8D5524 100%
);웜 블러쉬 하이라이트 그라데이션
background: linear-gradient(
120deg,
#FFEFC7 0%,
#FFB6A3 50%,
#EBC4AF 100%
);볼 색상과 자연스러운 따뜻함에 완벽합니다
Tailwind CSS 커스텀 설정
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'skin-tone-light': 'linear-gradient(90deg, #FFE5D9 0%, #EBC4AF 50%, #8D5524 100%)',
'skin-tone-medium': 'linear-gradient(135deg, #F5D0C5 0%, #D4A574 100%)'
}
}
}
}빠른 참조 표
| 이름 | HEX | RGB | 피츠패트릭 척도 |
|---|---|---|---|
| 포슬린 / 매우 밝은 톤 (Porcelain / Very Fair) | #FFE5D9 | rgb(255, 229, 217) | Type I |
| 페어 / 밝은 톤 (Fair / Light) | #F5D0C5 | rgb(245, 208, 197) | Type II |
| 라이트 미디엄 (Light Medium) | #EBC4AF | rgb(235, 196, 175) | Type III |
| 미디엄 / 올리브 (Medium / Olive) | #D4A574 | rgb(212, 165, 116) | Type IV |
| 미디엄 브라운 (Medium Brown) | #C68642 | rgb(198, 134, 66) | Type V |
| 다크 브라운 / 딥 (Dark Brown / Deep) | #8D5524 | rgb(141, 85, 36) | Type VI |
더 포용적인 디자인을 만드세요
모든 사람을 대변하는 디자인을 구축하기 위해 우리의 다른 컬러 팔레트와 도구를 탐구해 보세요.
Explore Our Color Library
Discover our complete collection of color guides with HEX codes, palettes, and design inspiration.