Design

그라디언트

정해진 공간에서 두 가지 이상의 색 사이를 부드럽고 연속적으로 전환하는 것.

그러데이션은 직선을 따라 전환되는 선형, 중심점에서 바깥으로 전환되는 방사형, 중심점 주위를 도는 원추형이 있을 수 있습니다. CSS에서는 linear-gradient(), radial-gradient(), conic-gradient() 함수를 사용해 background-image 값으로 구현됩니다. 그러데이션은 디자인에 깊이, 입체감, 시각적 흥미를 더합니다. 현대의 디자인 트렌드는 배경에는 은은한 그러데이션을, 브랜딩에는 대담하고 다채로운 그러데이션(인스타그램과 파이어폭스에서 볼 수 있듯이)을 선호합니다. 특정 색 쌍 사이에 그러데이션을 만들 때 채도가 낮고 탁한 중간 지점이 생길 수 있는데, OKLCH 보간법을 사용하면 전환 구간 내내 선명한 색을 유지하는 데 도움이 됩니다.

직접 해보기

팔레트 생성기

보색, 유사색, 3색 조화, 분리 보색 배색을 사용해 조화로운 색상 팔레트를 생성합니다.

쉐이드 생성기

디자인 시스템을 위해 모든 기본 색상에서 Tailwind CSS 스타일의 쉐이드 스케일(50~950)을 생성합니다.

관련 글

지각 색상 공간: Lab, LCH, Oklab, OKLCH

CIE Lab, LCH, Oklab, OKLCH 등 지각적으로 균일한 색상 공간을 탐색해 보세요. 각 디자인이 어떻게 설계되었는지, 어디에 뛰어난지, CSS 및 디자인 작업에 어떤 것이 사용되는지 알아보세요.

Next.js 및 Satori를 사용하여 다채로운 OG 이미지 생성

Next.js 및 Satori를 사용하여 동적 오픈 그래프 이미지를 생성하세요. 그라디언트, 브랜드 색상, 반응형 디자인을 사용하여 색상 인식 OG 템플릿을 만듭니다.

색상 분리(Color Separation) 설명: 인쇄용 파일 준비하기

CMYK 색상 분리, 별색 플레이트, 트래핑, 레지스트레이션 마크를 이해하세요. 올바른 색상 분리로 인쇄 준비 파일을 준비하세요.

Chainlink 브랜드 컬러: 오라클 블루와 육각형

Chainlink의 독특한 블루(#375BD2)와 육각형 로고 상징주의를 탐구하세요. 오라클 네트워크 브랜딩이 DeFi 인프라에서 어떻게 기업 신뢰를 구축하는지 알아보세요.

Amazon 브랜드 컬러: 서점 갈색에서 스마일 오렌지까지

서점 갈색에서 상징적인 스마일 오렌지(#FF9900)까지 Amazon의 브랜드 컬러 진화를 추적합니다. Prime 파랑, AWS 컬러, 서브브랜드 팔레트를 탐구합니다.

핀테크 브랜드 색상: 파란색으로 신뢰를 쌓다

핀테크 기업들이 파란색을 선택하는 이유: Stripe의 #635BFF, PayPal의 #003087, Robinhood의 예외적인 초록색, 그리고 금융 서비스 디자인에서 색상 심리학이 갖는 의미.