이 색 뭐지 싶을 때 코드로 뽑는 법

예쁜 상세페이지 봤는데 이 색 뭐지 싶죠? 디자이너한테 물어보기 애매하고. 사진 올리면 코드가 나와요. 클릭 한 번이면 복사 끝이에요.

올리면 대표색 6개가 나와요

자주 쓰인 순서대로 보여줘요. 배경색, 포인트색 한눈에 보여요. 솔직히 이게 제일 편해요. 일일이 찍을 필요 없거든요.

카드를 누르면 코드가 떠요

HEX, RGB, Tailwind 세 가지가 나와요. 필요한 거 눌러서 복사하세요. 복사됨 뜨면 끝이에요.

코드 종류	생김새	쓰는 곳
HEX	#FF5733	포토샵, 피그마
RGB	rgb(255,87,51)	CSS 직접 쓸 때
Tailwind	bg-orange-500	개발자 전달용

원하는 지점을 직접 찍어봐요

이미지 클릭하면 그 픽셀 색이 나와요. 그라데이션 중간색 뽑을 때 좋아요. 대표색에는 없는데 딱 그 지점 색이 필요한 경우 말이에요.

화면 스포이드도 돼요

크롬·엣지면 화면 아무 곳이나 찍을 수 있어요. 다른 탭에 있는 색도 가져와요. ESC 누르면 취소돼요.

JPG는 살짝 어긋나요

압축 때문에 근처 픽셀끼리 섞여요. 1~2단계 차이 나면 주변을 몇 번 찍어보고 중간값 쓰세요. PNG 원본이면 정확해요.

개발자한테 전달할 때 팁이에요

HEX랑 Tailwind 같이 줘요

디자이너는 HEX로 보고 개발자는 Tailwind로 써요. 둘 다 주면 왔다갔다 안 해요.

어디에 쓰는 색인지 적어줘요

배경용, 버튼용, 글자용. 색만 주면 어디다 쓰는지 물어봐요. 한 줄 메모가 협업 시간을 줄여줘요.

전달 항목	예시
배경색	#FFFFFF
포인트색	#FF5733
글자색	#1A1A1A

그라데이션 중간색을 뽑아봐요

대표색에 없을 때가 있어요

그라데이션 중간 톤은 TOP 6에 안 잡혀요. 그럴 땐 직접 찍어야 해요. 이미지 클릭하면 그 픽셀 색이 바로 나와요. 경계 근처를 몇 번 찍어보고 중간값 쓰세요.

비슷한 색 여러 개 모아요

명도 단계별로 3~4개 뽑아두면 팔레트가 돼요. 버튼 기본색, 호버색, 비활성색 이렇게 나누면 개발자가 좋아해요. 색 하나만 주면 나머지는 알아서 하겠지 하다가 이상해져요.

뽑을 것	개수	용도
기본색	1개	버튼·포인트
밝은 단계	1~2개	배경·호버
어두운 단계	1개	글자·테두리

모바일에서 뽑을 땐요

손가락이 굵어서 힘들죠?

모바일은 픽셀 찍기 어려워요. 확대해서 찍으세요. 그래도 안 되면 PC에서 하세요. 정확한 색 필요하면 모바일은 비추예요. 대충 분위기만 볼 때 쓰세요.

캡처 화질이 관건이에요

저화질 캡처는 색이 뭉개져요. 원본 이미지로 올리세요. 인스타에서 꾹 눌러 저장한 거보다 원본 링크가 정확해요. PNG면 제일 좋아요.

저장해두고 쓰는 습관이에요

마음에 드는 조합 나오면 메모장에 적어둬요. HEX 세 개 한 줄이면 돼요. 나중에 비슷한 거 만들 때 꺼내 쓰면 빨라요. 디자이너들도 다 이렇게 모아둬요.

색 조합 망하는 패턴을 피해요

채도 높은 색끼리 붙이지 마세요

빨강이랑 파랑 같이 쓰면 눈 아파요. 둘 다 튀는 색이면 하나는 죽여야 해요. 포인트색 하나 정하고 나머지는 무채색으로 가세요. 이게 제일 안전한 조합이에요.

회색이 제일 어려워요

회색에도 온도 있어요. 따뜻한 회색이랑 차가운 회색이 섞이면 어색해요. 배경 회색 정했으면 버튼 회색도 같은 계열로 가세요. 헷갈리면 그냥 흰색이랑 검정만 쓰세요.

망하는 조합	살리는 법
원색 2개 충돌	하나는 무채색으로 바꿔요
회색 온도 섞임	같은 계열로 통일해요
글자색 흐림	배경이랑 명도 차이 키워요

명도 대비부터 체크해요

예쁜데 안 읽히면 소용없어요. 글자랑 배경 명도 차이가 크면 돼요. 연회색 바탕에 흰 글씨는 안 보여요. 진한 바탕에 흰 글씨, 밝은 바탕에 검은 글씨가 기본이에요.

자주 쓰는 조합을 외워둬요

무난한 기본 3종이에요

흰 바탕에 검은 글씨, 포인트색 하나. 이게 제일 많이 쓰는 조합이에요. 어디다 써도 안 망해요. 고민될 땐 이걸로 가세요.

포인트색 고르는 법이에요

브랜드 느낌 먼저 정해요. 믿음직하면 파랑 계열, 활기차면 주황 계열, 고급지면 검정에 금색 포인트예요. 색 하나가 분위기를 정해요. 두 개 쓰면 싸워요.

분위기	포인트색 예시
믿음직함	파랑 계열
활기참	주황·노랑 계열
고급스러움	검정 바탕에 금색

배경은 흰색이 답이에요

검정 바탕 멋있어 보이죠? 근데 글 읽기 힘들어요. 인쇄하면 잉크도 많이 먹어요. 특별한 이유 없으면 흰 바탕 가세요. 다크모드는 나중에 생각해요.

다음에 예쁜 거 보면 캡처부터 해두세요. 코드는 여기서 뽑으면 돼요.