neonnuri COLOR LAB

Color Lab

NN palette lab

NN Color Lab

Pick. Mix. Copy.

01 오로라
티켓
웹 화면의 첫인상을 선명하게 만드는 비비드 컬러 조합.
02 월넛
스튜디오
미니멀한 디자인 시스템에 어울리는 따뜻하고 차분한 조합.
03 비 오는
블루
스타일리시한 에디토리얼 화면에 어울리는 정돈된 블루.
04 라임
터미널
어두운 화면에 긴장감을 더하는 라임 포인트.
05 파스텔
창가
부드러운 파스텔 톤으로 사랑스럽고 편안한 분위기를 더해요.

HOW TO USE COLOR

컬러는 장식이 아니라 화면의 분위기, 정보의 우선순위, 브랜드의 기억 방식을 정하는 디자인 언어입니다.

01

첫인상 정하기

비비드한 조합은 이벤트와 캠페인 화면에, 뉴트럴한 조합은 포트폴리오와 서비스 소개 화면에 잘 어울립니다.

02

가독성 확인하기

밝은 배경에는 어두운 텍스트를, 어두운 배경에는 밝은 텍스트를 먼저 맞춘 뒤 포인트 컬러를 더하면 안정적입니다.

03

HEX 코드 복사하기

마음에 드는 컬러 칩을 클릭하면 HEX 코드가 복사됩니다. 디자인 시안, CSS 변수, 노션 문서에 바로 붙여 넣을 수 있습니다.

COLOR ARCHIVE

다양한 컬러 조합을 한곳에서 모아보고 골라보세요.

COLOR MAKER

좋아하는 컬러 하나로 나만의 팔레트를 만들어 보세요.

배색 방식

한 가지 색을 밝고 어두운 단계로 나눠요.

BG & FONT COLOR

배경색과 폰트 색상을 함께 바꾸고, 실제 조합의 가독성을 바로 확인해 보세요.

COLOR SETTINGS

TEXT COLOR

HEX 코드를 입력하거나 컬러칩을 눌러 원하는 조합을 만들어 보세요.

5.05 : 1AA

Good color makes
the message clear.

NN COLOR LAB · Aa 123

COLOR INSPIRATION

다양한 팔레트가 만드는 분위기를 가로로 넘기며 살펴보세요.

COLOR NOTES

상업 프로젝트에 참고해도 되나요?

팔레트의 HEX 코드는 자유롭게 참고할 수 있습니다. 다만 사이트의 디자인, 레이아웃, 코드 전체를 그대로 복제하는 것은 허용하지 않습니다.

팔레트는 어떻게 고르면 좋나요?

브랜드가 전달하려는 감정부터 정해 보세요. 활기, 신뢰, 차분함, 실험성처럼 한 단어를 정하면 필요한 컬러 대비가 훨씬 선명해집니다.

색 조합은 계속 추가되나요?

NN Color Lab은 개인 컬러 실험실로 운영됩니다. 계절감, 웹 트렌드, 실제 화면 활용도를 기준으로 조합을 꾸준히 보강합니다.