스튜디오

NFP

Creative studio

0%
...
컬러 조합기대비 체커팔레트 (조화)팔레트 (랜덤)단색 카드그라데이션 카드컬러 추출기RGB↔CMYK그라데이션 2컬러그라데이션 3컬러

NFP 크리에이티브 · 컬러 도구

2색 그라데이션

두 색과 방향을 고르면 그라데이션 미리보기와 CSS 코드를 바로 만들어줍니다.

컬러 선택

빠른 조합

미리보기

#FF6B6B→#4ECDC4
background: linear-gradient(to bottom, #FF6B6B, #4ECDC4);

컬러 하모니 분석

관계보색
채도 차이중간
추천도높음

알아두기

  • 2색 그라데이션은 배경, 버튼, 배너에 깊이감을 주는 가장 기본적인 기법입니다.
  • 색상환에서 30~60° 떨어진 색이나 보색끼리 섞으면 탁해지지 않고 선명한 그라데이션이 됩니다.
  • 하모니 분석은 두 색의 색상각·채도 차이를 보고 관계와 추천도를 알려줍니다.
  • 완성된 CSS 코드를 복사해 background 속성에 바로 붙여넣으세요.

관련 툴

그라데이션 3컬러세 가지 컬러로 복잡하고 아름다운 그라데이션을 만들고 CSS 코드를 생성하는 도구입니다.그라데이션 컬러 카드랜덤으로 그라데이션 카드를 뽑아 오늘의 색상 조합 영감을 얻어보세요.단색 컬러 카드랜덤으로 컬러 카드를 뽑아 오늘의 색상 영감을 얻어보세요.컬러 팔레트 (조화)조화로운 5색 컬러 팔레트를 자동으로 생성하는 도구입니다.

두 가지 색상 조합의 그라데이션을 세밀하게 조정합니다. 방향, 각도, 색상 위치를 자유롭게 설정하고 CSS 코드도 함께 제공합니다.

  • CSS 코드를 복사해 웹 개발에 바로 적용하세요
  • 선형·방사형 그라데이션을 비교해보세요
그라데이션 2컬러 · 스튜디오 NFP