분홍색에서 바이올렛까지 그라데이션
분홍색에서 바이올렛까지 부드럽게 이어지는 CSS 그라데이션입니다. OKLab으로 섞어서 중간 색이 탁해지지 않습니다. 각도를 바꾸고 색상을 추가한 뒤 코드를 복사하세요.
색상
색 공간
OKLab은 중간 색을 밝게 유지합니다. sRGB는 구형 브라우저의 혼합 방식으로, 중간이 회색빛으로 탁해지는 경우가 많습니다.
유형
CSS
background: linear-gradient(90deg, #ffc0cb, #fdb9d0, #fbb2d5, #f9aada, #f7a3de, #f49be2, #f293e6, #f08bea, #ee82ee);
background: linear-gradient(90deg in oklab, #ffc0cb, #ee82ee);Tailwind CSS v4
bg-linear-90/oklab from-[#ffc0cb] to-[#ee82ee]그라데이션을 따라 나타나는 색상
색 공간별 분홍색, 바이올렛 혼합 결과
같은 두 색이라도 브라우저가 어느 색 공간에서 섞느냐에 따라 중간 색이 달라집니다. 아래는 50% 지점의 정확한 색상입니다. 이 두 색은 어느 색 공간에서도 거의 비슷하게 섞입니다. 중간 색이 OKLab 기준 #f7a3de, sRGB 기준 #f7a1dd이므로 어느 쪽을 써도 됩니다.
| 색 공간 | 그라데이션 미리보기 | 중간 색 | 명도 | 크로마 |
|---|---|---|---|---|
| OKLab | #f7a3de | 81.5% | 0.124 | |
| OKLCH | #ff9fd2 | 81.5% | 0.13 | |
| sRGB | #f7a1dd | 81.2% | 0.125 | |
| LCH | #ff9dd1 | 81.5% | 0.135 | |
| HSL | #f99fd4 | 80.7% | 0.125 |
이 그라데이션에 관한 질문
CSS로 분홍색에서 바이올렛까지 이어지는 그라데이션은 어떻게 만드나요?
다음 코드를 사용하세요: background: linear-gradient(90deg in oklab, #ffc0cb, #ee82ee). 아주 오래된 브라우저를 위해서는 그 앞에 sRGB 버전 줄을 추가하세요. OKLab 보간은 모든 최신 브라우저에서 작동합니다.
분홍색에서 바이올렛까지의 정확히 중간 색은 무엇인가요?
OKLab으로 섞으면 분홍색에서 바이올렛까지의 중간 색은 #f7a3de입니다. 일반 sRGB로 섞으면 #f7a1dd입니다.
Tailwind CSS로 분홍색에서 바이올렛까지 이어지는 그라데이션은 어떻게 만드나요?
Tailwind CSS v4에서는 다음 클래스를 사용하세요: bg-linear-90/oklab from-[#ffc0cb] to-[#ee82ee].