파스텔 색상 생성기

파스텔은 원색에 흰색을 많이 섞은 색입니다

파스텔 색은 원색에 흰색을 많이 섞어 밝고 옅게 만든 색입니다. 위의 첫 화면에 나온 분홍 #FFCAE0은 원색 #FF006A 21%에 흰색 79%를 섞은 색이고, 레몬색 #FDF6C5는 원색 #FFDF00 22%, 흰색 77%, 검정 1%로 이루어져 있습니다. 위키백과도 파스텔 색을 HSV 색 공간에서 밝고 채도가 낮은 옅은 계열의 색으로 설명합니다.

이 생성기는 색 계열과 톤을 고르면 파스텔 3~8색 조합을 뽑아 줍니다. 마음에 드는 색은 자물쇠로 고정하고 나머지만 다시 뽑을 수 있고, 파스텔 지도에서 점을 끌어 색상과 맑기를 직접 다듬을 수도 있습니다. 고른 색마다 읽기 좋은 글자색과 대비, HEX·RGB·HSL·HWB·OKLCH 코드, 원색과 흰색을 섞은 비율을 함께 보여 줍니다.

파스텔 조합이 필요한 상황

파스텔은 넓은 면에 칠해도 눈이 덜 피로하고 글자와 사진을 가리지 않아서 배경색으로 많이 씁니다. 다만 쓰는 곳마다 고를 때 따져야 할 점이 다릅니다.

• 웹·앱 화면: 카드 배경, 알림 띠, 태그처럼 넓지만 눈에 거슬리면 안 되는 면에 씁니다. 이때는 그 위에 올릴 글자색이 읽히는지가 가장 중요하므로 짝 글자색과 대비를 함께 확인합니다.
• 아이 용품·봄 시즌 디자인: 돌잔치 초대장, 어린이 교재, 봄 신상품 배너처럼 부드러운 인상이 필요한 디자인에 씁니다. 여러 계열을 섞되 톤을 하나로 맞추면 색이 많아도 한 세트로 보입니다.
• 발표 자료·문서: 표의 줄 구분, 단계별 상자, 차트의 배경 영역에 씁니다. 진한 강조색 한 가지와 파스텔 여러 개를 함께 쓰면 강조할 곳이 분명해집니다.
• 다이어리·굿즈·그림: 스티커, 플래너 꾸미기, 일러스트의 바탕색을 정할 때 씁니다. 화면 색을 물감이나 인쇄로 옮길 때는 같은 색이 나오지 않을 수 있어 시험 인쇄가 필요합니다.

생성기 쓰는 법

1. 색 계열에서 전체 또는 빨강·주황·노랑·초록·민트·파랑·보라·분홍 가운데 하나를 고릅니다. 계열 하나를 고르면 그 안에서 색상과 맑기가 겹치지 않게 나눠 뽑습니다.
2. 톤을 옅게·부드럽게·맑게·섞어서 가운데 고르고 개수를 3~8색으로 정합니다. 계열이나 톤을 바꾸면 고정하지 않은 색이 바로 새로 뽑힙니다.
3. 새로 뽑기를 누르거나 Space 키를 누릅니다. 마음에 드는 색은 카드의 자물쇠를 눌러 고정하면 다시 뽑아도 그대로 남습니다.
4. 카드를 눌러 색을 고른 뒤 파스텔 지도에서 그 점을 끌거나 원하는 자리를 누릅니다. 왼쪽·오른쪽은 색상, 위·아래는 맑기가 바뀝니다. 점에 초점을 두고 화살표 키로 한 칸씩, Shift와 함께 누르면 열 칸씩 옮길 수 있습니다.
5. 브랜드 색처럼 정해 둔 색이 있으면 내 색을 파스텔로에 #2563EB, rgb(37 99 235), royalblue처럼 넣습니다. 같은 색상의 파스텔로 바뀌어 지금 고른 칸에 들어가고 고정됩니다.
6. 완성한 조합은 HEX 모두 복사, CSS 변수 복사(짝 글자색 포함), PNG 저장(1200 × 630), 링크 복사로 가져갑니다. 링크에는 색과 고정 상태가 담깁니다.

파스텔은 흰색을 섞은 양으로 구분합니다

CSS Color 4의 HWB 색 표기는 색을 색상 하나에 흰색과 검정을 얼마나 섞었는지로 나타냅니다. 화면의 색 하나는 원색, 흰색, 검정을 나눈 비율로 정확히 바꿔 쓸 수 있습니다. 흰색이 가장 작은 RGB 값, 검정이 255에서 가장 큰 값을 뺀 몫이고 나머지가 원색입니다. 파스텔은 이 가운데 흰색이 압도적으로 많고 검정은 거의 없는 색입니다.

생성기는 색을 뽑을 때 이 비율을 직접 정하지 않고, 눈에 비슷하게 보이도록 만든 OKLab 색 공간에서 원색과 흰색을 잇는 직선 위의 한 점을 고릅니다. 같은 흰색 79%라도 원색이 노랑이면 아주 밝고 보라면 덜 밝게 보이기 때문입니다. 지도 위의 맑기 값이 그 점의 위치이고, 상세 칸의 섞는 비율은 그 결과를 HWB로 다시 나눈 값입니다.

톤 세 가지: 옅게, 부드럽게, 맑게

맑기는 0부터 100까지이며 0에 가까울수록 흰색이 많습니다. 톤은 맑기를 세 구간으로 나눈 것이고, '섞어서'는 0~100 전체에서 뽑습니다. 흰색 비율은 지도 위 모든 색상을 계산한 범위입니다.

파스텔 색상표: 계열 8가지 × 톤 3가지

각 계열의 가운데 색상에서 옅게(맑기 15)·부드럽게(48)·맑게(82)로 뽑은 24가지 코드입니다. 생성기 지도의 같은 자리와 같은 값이므로, 표에서 고른 색을 지도에서 조금씩 옮겨 비슷한 색을 더 찾을 수 있습니다.

파스텔 위에 올릴 글자색

WCAG 2.2는 본문 글자와 배경의 명도 대비를 4.5:1 이상(AA), 더 엄격하게는 7:1 이상(AAA)으로 권합니다. 파스텔은 매우 밝아서 흰 글자를 올리면 거의 읽히지 않습니다. 생성기 지도에 있는 36,360가지 파스텔을 모두 계산해 보면 흰 글자 대비는 가장 높은 색도 1.8:1이라 큰 글자 기준 3:1에도 닿지 않습니다.

반대로 같은 색상의 아주 진한 색(OKLCH 밝기 36%)을 글자로 쓰면 모든 파스텔에서 6.1:1 이상이 나오고, 88.0%는 7:1 이상입니다. 생성기가 '짝 글자'로 보여 주는 색이 이것입니다. 흰 배경에서 4.5:1을 겨우 넘기는 회색 #767676은 파스텔 위에서는 기준에 못 미칩니다.

대비는 소수 첫째 자리에서 내려 적었습니다. WCAG는 대비를 반올림하지 않으므로 4.49:1은 4.5:1을 넘지 않은 것으로 봅니다. 검정도 충분히 읽히지만, 같은 색상의 진한 색을 쓰면 배경과 한 벌로 보여 파스텔 특유의 부드러운 인상이 덜 깨집니다.

계열마다 밝기가 다른 이유

같은 '부드럽게' 톤이라도 노랑과 민트 파스텔은 거의 흰색에 가깝고, 분홍과 보라는 색이 더 짙어 보입니다. 원색 자체의 밝기가 다르기 때문입니다. 노랑 원색은 처음부터 밝아서 흰색을 조금만 섞어도 매우 밝아지고, 보라 원색은 어두워서 흰색을 많이 섞어야 비슷하게 밝아집니다.

그래서 생성기는 원색이 어두운 계열일수록 흰색을 더 섞어 파스텔 밝기를 일정 수준 위로 맞춥니다. 노랑 파스텔을 더 진하게 하려고 어둡게 만들면 겨자색이나 올리브색처럼 탁해지므로, 맑기를 100까지 올려도 노랑 계열 파스텔에는 흰색이 60% 넘게 남도록 했습니다.

내 색을 파스텔로 바꾸기

'내 색을 파스텔로'는 넣은 색의 OKLCH 색상각을 그대로 두고 지금 고른 톤의 가운데 맑기로 파스텔을 만듭니다. 넣은 색이 이미 그 색상의 가장 맑은 파스텔보다 밝으면 원래 밝기에 가장 가까운 맑기를 고르므로, 이미 파스텔인 색은 거의 그대로 남습니다. 아래는 톤이 '부드럽게'일 때의 결과입니다.

회색·흰색·검정처럼 채도가 거의 없는 색(OKLCH 채도 0.006 미만)은 어느 계열의 파스텔로 만들지 정할 수 없어서 바꾸지 않고 안내만 보여 줍니다. aliceblue #F0F8FF처럼 아주 옅게 색이 도는 흰색은 채도가 0.013이라 그 색상의 가장 옅은 파스텔 #E1F1FF로 바뀝니다.

자주 틀리는 경우

• 파스텔 배경에 흰 글자: 버튼이나 배너에서 흔히 보이지만 대비가 1~1.8:1이라 읽기 어렵습니다. 글자는 짝 글자색이나 검정 계열을 쓰고, 흰 글자가 꼭 필요하면 배경을 파스텔이 아닌 진한 색으로 바꿉니다.
• 파스텔끼리 글자와 배경: 분홍 바탕에 하늘색 글자처럼 파스텔 두 개를 겹치면 둘 다 밝아서 대비가 거의 나오지 않습니다. 파스텔은 면에, 글자는 진한 색에 맡깁니다.
• HSL 채도 숫자만 보고 판단: #FFCAE0의 HSL 표기는 hsl(335 100% 89.6%)로 채도가 100%입니다. HSL 채도는 밝기와 따로 계산되기 때문입니다. 파스텔 여부는 HSV 채도(이 색은 21%)나 HWB의 흰색 비율(79%)로 보는 편이 맞습니다.
• 회색을 섞어 탁해진 색: 흰색 대신 회색을 섞으면 HWB의 검정이 늘어 차분한 '더스티' 색이 됩니다. 이것도 많이 쓰는 색이지만 맑은 파스텔과는 다른 계열이라 이 생성기의 결과와 섞으면 한쪽이 칙칙해 보일 수 있습니다.
• 계열마다 톤이 제각각: 옅은 노랑과 맑은 보라를 함께 쓰면 보라만 튀어 보입니다. 여러 계열을 쓸 때는 톤을 하나로 고정하고 뽑는 편이 정돈돼 보입니다.
• 화면 색 그대로 인쇄: 모니터의 파스텔은 빛으로 보는 색이라 종이에 인쇄하면 더 탁하거나 노랗게 나올 수 있습니다. 인쇄물은 인쇄소의 CMYK 견본이나 시험 인쇄로 확인합니다.

한계와 주의

• '파스텔'에는 정해진 국제 기준이 없습니다. 이 생성기의 범위(원색에 흰색 58~93%)는 흔히 파스텔로 부르는 색을 담도록 정한 설계 값이며, 다른 도구의 파스텔과 다를 수 있습니다.
• 모든 색은 sRGB 화면 기준입니다. 넓은 색역 모니터, 휴대폰의 야간 모드나 색 보정 설정에 따라 같은 코드도 다르게 보입니다.
• 섞는 비율은 화면 색을 HWB로 나눈 값입니다. 물감이나 색연필의 실제 양과는 다르므로 그림 재료를 섞을 때는 참고로만 쓰고 시험 칠로 확인합니다.
• 명도 대비는 글자와 배경의 밝기 차이만 봅니다. 색각 이상이 있는 사람에게 두 파스텔이 구분되는지는 따로 확인해야 합니다.
• 새로 뽑기는 브라우저의 무작위 값을 쓰므로 같은 설정에서도 매번 다른 조합이 나옵니다. 마음에 든 조합은 링크 복사나 PNG 저장으로 남겨 두세요.

기준: 색은 W3C CSS Color 4(2026년 10월 20일 후보 권고안 초안)의 OKLab·HWB 정의로, 대비는 WCAG 2.2(2024년 12월 12일 권고안)의 상대 휘도 식으로 계산합니다. 표의 코드와 대비는 2026년 10월 21일 이 생성기로 계산한 값입니다.

출처

• 01W3C — CSS Color Module Level 4, 8. HWB Colors색상에 흰색·검정을 섞는 양으로 색을 나타내는 hwb() 표기, 흰색 + 검정이 100% 이상이면 회색
• 02W3C — CSS Color Module Level 4, 9.2 Oklab and OkLCh지도와 생성에 쓴 OKLab·OKLCH 색 공간, 14절 색역 맞추기(채도를 줄여 sRGB 안으로)
• 03W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)본문 글자 4.5:1, 큰 글자 3:1, 1.4.6의 7:1과 대비 계산식
• 04Björn Ottosson — A perceptual color space for image processingOKLab 색 공간의 정의와 변환 행렬
• 05위키백과 — 파스텔 색HSV 색 공간에서 밝고 채도가 낮은 옅은 계열의 색이라는 설명

자주 묻는 질문

함께 쓰는 도구