Design

그라디언트

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

Gradients can be linear (transitioning along a straight line), radial (transitioning outward from a center point), or conic (transitioning around a center point). In CSS, they are implemented as background-image values using linear-gradient(), radial-gradient(), and conic-gradient() functions. Gradients add depth, dimension, and visual interest to designs. Modern design trends favor subtle gradients for backgrounds and bold, multicolor gradients for branding (as seen with Instagram and Firefox). When creating gradients between certain color pairs, desaturated or muddy midpoints can occur; using OKLCH interpolation helps maintain vivid colors throughout the transition.

직접 해보기

팔레트 생성기

보색, 유사색, 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의 예외적인 초록색, 그리고 금융 서비스 디자인에서 색상 심리학이 갖는 의미.