메시 그라데이션 생성기

메시 그라데이션은 CSS 그라데이션처럼 한 선을 따라 섞는 대신, 캔버스의 각기 다른 지점에 놓인 여러 색을 섞습니다. 부드럽고 유기적인 느낌 덕분에 배경화면, 히어로 영역, 앱 스플래시 화면에 인기가 많습니다. 이 생성기는 색 점(또는 시드로 만든 무작위 점)을 배치하고, 모든 점으로부터 각 픽셀을 OKLab 색 공간에서 섞어 탁해지지 않게 하며, 줄무늬(밴딩)를 막는 노이즈를 선택적으로 더해 PNG, JPG, WebP로 저장합니다. 모든 과정은 브라우저 안에서 이뤄집니다.

사용 방법

1. 색 점을 한 줄에 하나씩 "색 x% y%" 형식으로 입력하거나, 무작위 색과 시드를 고릅니다.
2. 크기 프리셋 또는 직접 입력한 크기를 고릅니다.
3. 색을 얼마나 부드럽게 섞을지, OKLab과 sRGB 중 어디서 섞을지 정합니다.
4. 큰 화면용으로는 노이즈를 조금(2–6%) 주고, 형식을 골라 내려받습니다.

계산식

color(pixel) = Σ wᵢ × colorᵢ ÷ Σ wᵢ, with wᵢ = 1 ÷ (dᵢ² + 0.04²)^(p ÷ 2)

dᵢ는 픽셀에서 점 i까지의 거리(이미지 대각선 기준 상대값)이고, p는 1.6(아주 부드럽게), 2.4(보통), 3.6(또렷하게)입니다. 작은 0.04 항은 각 점의 정점을 둥글게 해 딱딱한 얼룩으로 보이지 않게 합니다. 색은 OKLab 좌표로 평균을 내므로 파랑에서 노랑으로 가는 혼합이 회색을 거치지 않습니다. 투명한 점은 CSS와 같이 불투명도로 가중해 어두워지지 않고 옅어집니다. 혼합은 최대 250,000개 샘플의 격자에서 계산한 뒤 쌍선형 보간으로 키웁니다.

예시

기본 점 네 개(10% 15%의 코랄 #FF6B6B, 85% 10%의 노랑 #FFD93D, 80% 85%의 초록 #6BCB77, 15% 80%의 파랑 #4D96FF)로 만든 1920 × 1080 이미지는 (192, 162)에서 코랄, (1536, 918)에서 초록이며 그 사이는 부드러운 OKLab 혼합입니다. 0% 50%의 검정과 100% 50%의 흰색, 두 점을 sRGB로 섞으면 두 점에서 같은 거리인 중간 지점이 약 #808080의 중간 회색이 됩니다.