버튼 한 번에 그라데이션 9개, 가운데가 탁하지 않은 CSS와 PNG
랜덤 그라데이션 생성기는 새 그라데이션을 누르거나 Space 키를 누를 때마다 큰 무대의 주 그라데이션 1개와 옆의 후보 8개를 함께 뽑습니다. 후보를 누르면 무대와 자리를 바꾸므로, 하나씩 넘겨 보던 방식보다 비교가 빠릅니다. 마음에 드는 색은 자물쇠로 고정하고, 모양은 선형·원형·원뿔·메시 가운데 고르거나 무작위로 둡니다.
이 생성기가 특히 신경 쓰는 부분은 색을 섞는 방식입니다. HEX 색만 적은 CSS 그라데이션은 하위 호환 때문에 sRGB 값을 그대로 섞습니다. 그래서 파랑(#0000FF)에서 노랑(#FFFF00)으로 가는 그라데이션의 가운데는 회색 #808080이 됩니다. 이 도구는 기본으로 OKLCH에서 섞는 CSS 줄을 주고, 그 줄을 모르는 옛 브라우저를 위한 sRGB 줄을 앞에 함께 적습니다. 결과는 CSS로 복사하거나, 바탕화면·휴대폰 크기의 PNG로 저장합니다.
언제 쓰나
- 누리집 첫 화면이나 배너 배경을 정할 때: 써 보기에서 그라데이션을 첫 화면 예시에 바로 입히고, 흰 글자와 검은 글자 가운데 어느 쪽을 얹어야 읽히는지 대비 수치로 확인합니다.
- 바탕화면·발표 자료 배경 그림이 필요할 때: 마음에 드는 그라데이션을 1920×1080, 4K, 세로 1080×1920 같은 크기의 PNG로 저장합니다. 크기는 너비·높이 칸에 직접 넣을 수도 있습니다.
- 브랜드 색 하나에 어울리는 그라데이션을 찾을 때: 그 색이 든 그라데이션을 링크로 불러와 자물쇠로 고정하고 색 조화를 고르면, 고정한 색의 색상 각을 기준으로 나머지 색이 정해집니다.
- 버튼·글자 강조에 쓸 색을 고를 때: 그라데이션 글자, 채운 버튼, 테두리 카드 모습을 함께 보여 주므로 넓은 배경이 아닌 작은 요소에서의 인상도 미리 볼 수 있습니다.
쓰는 법
- 뽑기: 새 그라데이션 버튼이나 Space 키를 누릅니다. Space 키는 무대가 화면에 보이고 입력칸이나 버튼에 초점이 없을 때만 작동합니다.
- 고르기: 후보 8개 가운데 마음에 드는 것을 누르면 무대로 올라오고, 무대에 있던 그라데이션은 그 자리로 내려갑니다.
- 고정하기: 정지 색 칸의 자물쇠를 누른 색은 다음 뽑기에서도 같은 순서 자리에 남습니다. 모양·각도 고정을 켜면 모양, 각도, 중심, 메시 점 위치는 두고 색만 바뀝니다.
- 설정 바꾸기: 모양·색 조화·색 수·톤을 바꾸면 그 설정으로 바로 다시 뽑습니다. 섞는 방식과 각도 막대는 색을 다시 뽑지 않고 지금 그라데이션만 바꿉니다.
- 가져가기: CSS 복사로 두 줄짜리 background 선언을, 링크 복사로 지금 그라데이션이 담긴 주소를 복사합니다. PNG 저장은 고른 크기로 그림을 만들어 내려받습니다. 최근 20개는 이 브라우저에만 남습니다.
색과 모양을 뽑는 방식
색은 OKLCH로 정합니다. OKLCH는 Björn Ottosson이 사람이 느끼는 밝기와 색 차이에 맞춰 만든 Oklab을 밝기(L)·채도(C)·색상 각(H)으로 다시 적은 것입니다. 먼저 색 조화 규칙으로 정지 색마다 색상 각을 정하고, 톤의 범위에서 밝기와 채도를 고릅니다. 밝기는 첫 정지 색에서 마지막 정지 색까지 한쪽으로 흐르게 두고(±0.03 흔들림) 방향은 무작위로 정해, 그라데이션에 밝은 쪽과 어두운 쪽이 생기게 합니다. 고른 색이 sRGB로 표시할 수 없는 범위면 밝기와 색상 각은 두고 채도만 줄입니다.
| 색 조화 | 정지 색의 색상 각 |
|---|---|
| 유사색 | 기준에서 한쪽 방향으로 40~90°를 고르게 나눠 걸어감 |
| 보색 | 0°, 180°를 번갈아(각 ±8°) |
| 삼각 | 0°, 120°, 240°를 차례로(각 ±8°) |
| 분할 보색 | 0°, 150°, 210°를 차례로(각 ±8°) |
| 단색 | 0°(±4°), 채도는 톤 범위보다 낮게 |
| 톤 | 밝기 L | 채도 C | 어울리는 쓰임 |
|---|---|---|---|
| 기본 | 0.50~0.90 | 0.08~0.17 | 밝기 폭이 넓어 그림처럼 쓰는 배경 |
| 파스텔 | 0.84~0.95 | 0.03~0.09 | 검은 글자를 얹는 밝은 배경 |
| 선명 | 0.58~0.80 | 0.15~0.26 | 버튼·배너처럼 눈에 띄어야 하는 곳 |
| 어둡게 | 0.22~0.45 | 0.05~0.14 | 흰 글자를 얹는 어두운 배경 |
모양도 무작위로 정합니다. 선형은 각도를 15° 단위로, 원형은 중심을 가로·세로 0·25·50·75·100% 가운데에서, 원뿔은 중심을 25·50·75% 가운데에서 고르고 시작 각을 15° 단위로 정합니다. 메시는 첫 색을 바탕으로 깔고 나머지 색마다 점을 하나씩 두며, 점의 위치는 5% 단위, 퍼지는 반지름은 상자 크기의 50~80%입니다. 고정한 색이 유채색이면 그 색의 색상 각이 규칙의 기준이 됩니다.
가운데가 회색이 되는 이유와 섞는 방식
CSS Color 4는 섞는 공간을 따로 정하지 않으면 Oklab에서 섞는다고 정하면서도, 하위 호환을 위해 HEX·rgb()·hsl() 같은 옛 sRGB 표기만 쓴 경우에는 감마 인코딩된 sRGB에서 섞도록 합니다. 대부분의 그라데이션 코드가 HEX로 적혀 있으므로, 실제로는 sRGB에서 섞이는 경우가 많습니다. sRGB에서 보색끼리 섞으면 빨강·초록·파랑 값이 가운데에서 서로 비슷해져 회색이 됩니다.
| 두 끝 색 | 섞는 방식 | 가운데(50%) 색 | 밝기 L | 채도 C |
|---|---|---|---|---|
| 파랑 #0000FF → 노랑 #FFFF00 | sRGB | #808080 | 0.600 | 0.000 |
| OKLab | #6CABC7 | 0.709 | 0.077 | |
| OKLCH | #00CFBD | 0.768 | 0.136 | |
| 빨강 #FF0000 → 청록 #00FFFF | sRGB | #808080 | 0.600 | 0.000 |
| OKLab | #D2A993 | 0.766 | 0.057 | |
| OKLCH | #B8BE00 | 0.771 | 0.171 | |
| 주황 #FF6A00 → 파랑 #0066FF | sRGB | #806880 | 0.549 | 0.047 |
| OKLab | #9C7DA6 | 0.633 | 0.070 | |
| OKLCH | #D246C2 | 0.632 | 0.221 |
세 방식의 성격은 다릅니다. OKLab은 밝기를 고르게 잇습니다. 파랑(L 0.452)과 노랑(L 0.968)의 가운데 밝기 0.709는 두 값의 평균과 거의 같고, sRGB의 0.600처럼 가운데가 어둡게 꺼지지 않습니다. 다만 색상환의 반대편으로 곧게 지나가므로 채도는 여전히 많이 줄어듭니다. OKLCH는 색상 각을 짧은 쪽으로 돌아가며 채도를 지키므로 가운데가 선명합니다. 대신 파랑에서 노랑으로 갈 때 청록을 지나는 것처럼, 두 끝에 없던 색이 가운데에 나타납니다.
규칙마다 2색 그라데이션을 1만 개씩 뽑아(기본 톤, 고정 씨앗) 그라데이션에서 가장 탁한 곳의 채도가 정지 색 채도의 절반 아래로 떨어지는 비율을 세면 아래와 같습니다. 색상 각이 150° 이상 벌어지는 보색·분할 보색은 sRGB와 OKLab 모두 대부분 가운데가 탁해지고, OKLCH만 그렇지 않습니다. 그래서 이 도구는 OKLCH를 기본으로 두고, 써 보기 아래의 띠와 채도 곡선으로 세 방식을 같은 색으로 비교해 보여 줍니다.
| 색 조화(2색) | OKLCH | OKLab | sRGB |
|---|---|---|---|
| 유사색 | 0% | 0% | 0% |
| 보색 | 0% | 100% | 100% |
| 삼각 | 0% | 13.7% | 9.6% |
| 분할 보색 | 0% | 99.4% | 93.8% |
| 단색 | 0% | 0% | 0% |
CSS 문법과 브라우저 지원
복사되는 CSS는 모양마다 아래 형식입니다. 정지 색 위치는 적지 않고 고르게 두는 CSS 기본 배치를 씁니다.
- 선형:
linear-gradient(135deg in oklch, #FFC9A3, #F7849F, #A08AF0). CSS Images 명세에서 0deg는 위쪽, 90deg는 오른쪽을 가리키고 각도가 커질수록 시계 방향으로 돕니다. 그라데이션 선의 길이는 상자의 너비 W·높이 H로 abs(W·sinA) + abs(H·cosA)입니다. - 원형:
radial-gradient(circle at 25% 75% in oklch, …). 크기를 적지 않으면 중심에서 가장 먼 모서리까지가 끝(farthest-corner)입니다. - 원뿔:
conic-gradient(from 45deg at 50% 50% in oklch, A, B, C, A). 시작 각도 0deg는 위쪽이고 시계 방향으로 돕니다. 첫 색을 끝에 한 번 더 적어 한 바퀴를 돈 자리에 이음매가 생기지 않게 했습니다. - 메시: 첫 색을 바탕색으로 두고, 나머지 색마다
radial-gradient(60% 60% at 20% 30%, #색, #색00)처럼 같은 색의 투명도 0으로 끝나는 타원을 겹칩니다. 색은 그대로이고 투명도만 바뀌므로 섞는 방식의 영향을 받지 않아in을 적지 않습니다. - 흰색·검은색·회색 정지 색: OKLCH 줄에서는
oklch(1 0.002 264.05)처럼 눈에 띄지 않는 채도 0.002와 옆 색의 색상 각을 붙여 적고, 양옆 색의 각이 다르면 같은 위치에 두 번 적습니다. 명세는 무채색의 색상 각이 옆 색을 따르게 하지만, 채도 0으로 적으면 Chrome이 색상 각을 다르게 처리해 가운데 색이 달라지는 것을 2026-10-20에 확인했습니다.
| 기능 | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
그라데이션 안의 섞는 공간 지정(in oklch 등) | 111 | 111 | 127 | 16.2 |
conic-gradient() | 69 | 79 | 83 | 12.1 |
섞는 공간을 모르는 브라우저는 in oklch가 든 선언 전체를 버립니다. 그래서 복사되는 CSS는 sRGB로 섞는 줄을 먼저, OKLCH·OKLab 줄을 뒤에 둡니다. 새 브라우저는 뒤의 줄을, 옛 브라우저는 앞의 줄을 씁니다. 순서를 바꾸면 새 브라우저에서도 sRGB 줄이 이깁니다.
그라데이션 위에 글자를 얹을 때
WCAG 2.2 성공 기준 1.4.3은 본문 글자와 배경의 대비를 4.5:1 이상, 큰 글자(18pt 또는 굵은 14pt 이상)는 3:1 이상으로 요구합니다. 해설 문서에는 그라데이션만을 위한 별도 규칙이 없고, 기법 G18은 글자와 그 뒤 배경 사이의 대비를 보라고 합니다. 그라데이션은 자리마다 배경색이 다르므로, 이 도구는 정지 색과 그라데이션 선을 1,024단계로 나눈 모든 색(메시는 가로 128칸 격자와 점 중심)과 비교한 가장 낮은 대비를 흰 글자와 검은 글자에 대해 보여 줍니다. 선형·원형·원뿔은 중심이 상자 안에 있어 그라데이션 선의 모든 위치가 화면 어딘가에 나타나므로, 화면 비율과 상관없이 이 값이 화면 전체의 가장 낮은 대비입니다. 대비는 소수 첫째 자리에서 내려 표시하고 그 값으로 판정해, 4.48:1을 4.5:1로 올려 통과시키지 않습니다.
| 톤(3색) | 흰 글자나 검은 글자가 어디서나 4.5:1 이상 |
|---|---|
| 기본 | 0% |
| 파스텔 | 100% |
| 선명 | 87% |
| 어둡게 | 100% |
톤마다 3색 그라데이션 5,000개(OKLCH로 섞음, 고정 씨앗)를 센 값입니다. 기본 톤은 밝기 폭이 0.50~0.90으로 넓어 밝은 끝에서는 흰 글자가, 어두운 끝에서는 검은 글자가 4.5:1을 넘지 못합니다. 글자를 얹을 배경이라면 파스텔(검은 글자)이나 어둡게(흰 글자) 톤에서 뽑는 편이 빠릅니다. 첫 화면 예시인 복숭아 → 분홍 → 라벤더 그라데이션은 흰 글자 1.4:1, 검은 글자 7.3:1입니다.
PNG로 저장하기
| 크기 고르기 | 너비×높이(px) | 비율 |
|---|---|---|
| PC 바탕화면 | 1920×1080 | 16:9 |
| QHD | 2560×1440 | 16:9 |
| 4K | 3840×2160 | 16:9 |
| 휴대폰·스토리 | 1080×1920 | 9:16 |
| 정사각형 | 1080×1080 | 1:1 |
| 링크 미리보기 | 1200×630 | 1.91:1 |
너비와 높이는 16~4096px 사이 정수로 직접 넣을 수도 있습니다. PNG는 서버로 보내지 않고 브라우저에서 화소마다 직접 계산해 그립니다. 선형의 그라데이션 선 길이, 원형의 farthest-corner, 원뿔의 각도, 메시의 겹치기를 CSS와 같은 식으로 계산하고, 섞는 방식도 고른 방식 그대로 씁니다. 넓은 면에 완만한 그라데이션을 8비트 색으로 담으면 계단 같은 띠 줄무늬가 보이기 쉬워, 채널마다 ±0.5 단계의 작은 난수를 더한 뒤 반올림(디더링)했습니다.
그림의 비율이 무대와 다르면 같은 CSS라도 모양이 조금 달라집니다. 예를 들어 90°(왼쪽 → 오른쪽) 선형 그라데이션은 선 길이가 상자 너비와 같아서, 너비 1920px 그림에서는 너비 1080px 그림보다 색이 천천히 바뀝니다.
자주 틀리는 경우
- 각도를 수학 각도로 읽기: CSS의 0deg는 위쪽입니다. 수학처럼 0°를 오른쪽으로 생각하면 방향이 90° 어긋납니다.
- OKLCH 줄만 붙여 넣기: 섞는 공간을 모르는 브라우저에서는 배경이 통째로 사라집니다. sRGB 줄을 앞에 함께 두세요.
- sRGB 줄과 OKLCH 줄의 순서 바꾸기: 뒤에 온 선언이 이기므로 sRGB 줄을 뒤에 두면 새 브라우저에서도 가운데가 탁하게 보입니다.
- 원뿔 그라데이션의 이음매: 마지막 색이 첫 색과 다르면 위쪽 0deg 자리에 날카로운 경계가 생깁니다. 첫 색을 끝에 다시 적으면 이어집니다.
- 글자 대비를 한 점에서만 재기: 그라데이션의 밝은 끝에서는 통과해도 어두운 끝에서는 미달일 수 있습니다. 글자가 놓일 수 있는 범위 전체에서 가장 낮은 값을 보세요.
한계와 주의
- 무작위라서 같은 설정으로도 매번 다른 결과가 나옵니다. 지난 결과는 링크나 최근 20개 기록으로만 되찾을 수 있고, 기록은 이 브라우저에만 저장됩니다(예전 판 기록 10개는 처음 한 번 옮깁니다).
- 섞은 색이 sRGB 범위를 벗어나면 채널마다 잘라 계산합니다. 브라우저가 다른 방식으로 맞추면 화면과 PNG의 색이 조금 다를 수 있습니다.
- 정지 색 위치는 고르게만 둡니다. 정지 위치나 색을 하나씩 다듬으려면 CSS 그라데이션 생성기가 맞습니다.
- 글자 대비는 흰색과 검은색 글자에 대해 그라데이션 전체에서 가장 낮은 값만 봅니다. 실제 글자 위치, 굵기, 그림자, 색각 차이는 반영하지 않습니다.
- PNG는 한 변 4096px까지 만듭니다. 휴대폰에서는 큰 그림을 그릴 때 몇 초 걸릴 수 있습니다.
기준일 CSS 명세·브라우저 지원·WCAG 출처는 2026-10-20에 확인했습니다. 표의 비율은 이 도구의 생성 규칙으로 직접 센 값입니다.
출처
- 01W3C: CSS Images Module Level 3§3.1.1 0deg는 위쪽·90deg는 오른쪽, 그라데이션 선 길이 abs(W·sinA) + abs(H·cosA), §3.2 원형 크기 기본값 farthest-corner
- 02W3C: CSS Images Module Level 4선형·원형·원뿔 문법의 섞는 공간 지정, 원뿔 시작 각 0deg는 위쪽·시계 방향, 지정이 없으면 Oklab
- 03W3C: CSS Color Module Level 4§13 보간: 옛 sRGB 표기만 쓰면 감마 인코딩 sRGB에서 섞음, 알파는 premultiplied, 극좌표 색상 각 기본 shorter
- 04Björn Ottosson: A perceptual color space for image processingOklab 정의와 sRGB 변환 행렬(2020-12-23)
- 05MDN: linear-gradient()브라우저 호환성 표: 섞는 공간 지정 Chrome·Edge 111, Firefox 127, Safari 16.2
- 06MDN: conic-gradient()브라우저 호환성 표: Chrome 69, Edge 79, Firefox 83, Safari 12.1
- 07W3C: WCAG 2.21.4.3 대비 4.5:1(큰 글자 3:1), 큰 글자 18pt·굵게 14pt, 대비 비율 식
- 08W3C: Understanding SC 1.4.3 Contrast (Minimum)배경 그림이 글자와 충분히 대비되지 않는 경우를 실패로 듦, G18은 글자와 그 뒤 배경의 대비
자주 묻는 질문
만든 그라데이션을 이미지로 저장할 수 있나요?
네. PNG 저장을 누르면 고른 크기(1920×1080, 2560×1440, 3840×2160, 1080×1920, 1080×1080, 1200×630 또는 직접 넣은 16~4096px)로 그림을 만들어 내려받습니다. 그림은 서버로 보내지 않고 브라우저에서 CSS와 같은 식으로 계산해 그리며, 띠 줄무늬를 줄이려고 ±0.5 단계 디더링을 넣습니다.
CSS를 붙여 넣었는데 가운데가 회색으로 보여요. 왜 그런가요?
HEX 색만 적은 그라데이션은 CSS Color 4의 하위 호환 규칙 때문에 sRGB 값을 그대로 섞습니다. 파랑 #0000FF에서 노랑 #FFFF00으로 가면 가운데가 #808080 회색이 됩니다. 이 도구가 주는 'in oklch' 줄을 쓰면 색상 각을 돌아가며 섞어 가운데 채도가 유지됩니다.
복사한 CSS에 background가 두 줄인 이유는 무엇인가요?
앞 줄은 섞는 공간을 모르는 옛 브라우저를 위한 sRGB 그라데이션이고, 뒤 줄이 OKLCH나 OKLab으로 섞는 그라데이션입니다. 그라데이션 안의 섞는 공간 지정은 Chrome·Edge 111, Firefox 127, Safari 16.2부터 지원하므로, 이를 모르는 브라우저는 뒤 줄을 버리고 앞 줄을 씁니다. sRGB를 고르면 한 줄만 나옵니다.
마음에 드는 색만 남기고 다시 뽑을 수 있나요?
네. 정지 색 칸의 자물쇠를 누른 색은 다음 뽑기에서도 같은 순서 자리에 남고, 후보 8개에도 똑같이 들어갑니다. 고정한 색이 유채색이면 그 색의 색상 각을 기준으로 색 조화 규칙을 적용합니다. 모양·각도 고정을 켜면 모양과 각도, 중심, 메시 점 위치도 그대로 둡니다.
옆에 나오는 후보 8개는 무엇인가요?
무대의 주 그라데이션과 같은 설정, 같은 고정 색으로 함께 뽑은 그라데이션입니다. 후보를 누르면 무대로 올라오고 무대에 있던 것은 그 자리로 내려가므로, 버리지 않고 비교할 수 있습니다. Space 키나 새 그라데이션 버튼을 누르면 9개가 함께 바뀝니다.
그라데이션 위에 글자를 얹어도 읽힐지 어떻게 아나요?
써 보기 아래에 흰 글자와 검은 글자의 가장 낮은 대비가 나옵니다. 정지 색과 그라데이션 선을 1,024단계로 나눈 모든 색(메시는 가로 128칸 격자와 점 중심)과 비교한 값이며, WCAG 2.2 기준 본문 4.5:1, 큰 글자 3:1로 판정합니다. 3색 그라데이션 5,000개를 세어 보면 파스텔·어둡게 톤은 100%, 선명 87%, 기본 톤은 0%가 본문 기준을 넘었습니다.
메시 그라데이션은 CSS로 어떻게 만드나요?
첫 색을 바탕색으로 두고, 나머지 색마다 같은 색의 투명도 0(#RRGGBB00)으로 끝나는 radial-gradient 타원을 겹칩니다. 예: radial-gradient(60% 60% at 20% 30%, #F7849F, #F7849F00). 앞에 적은 겹이 위에 그려지고, 색은 그대로인 채 투명도만 바뀌므로 섞는 방식의 영향을 받지 않습니다.
최근 기록은 어디에 저장되나요?
새로 뽑거나 후보를 고른 주 그라데이션 최근 20개가 이 브라우저의 저장소에만 남고 서버로 보내지 않습니다. 예전 판의 기록 10개는 처음 한 번 옮겨 옵니다. 다른 기기에서 열려면 링크 복사로 만든 주소를 쓰세요.