top of page

​색상피커 (Color Picker)

색상피커는 원하는 색상을 직접 선택하고 HEX, RGB, HSL, HSV 색상 코드를 한눈에 확인할 수 있는 온라인 도구입니다.
색상판과 슬라이더를 조절해 세밀하게 색상을 찾고, 유사 색상 팔레트도 함께 확인할 수 있습니다.

각 색상 코드는 복사 버튼으로 간편하게 복사하여 웹디자인, CSS, 일러스트 작업 등에 활용할 수 있습니다.
PC와 모바일에서 모두 편리하게 사용할 수 있습니다.

​아래 이미지 색상 추출기(Image Color Picker)와 색상 및 대비 시각화 도구(Color & Contrast Visualizer)도 색상 및 디자인 작업에 유용합니다.

​이미지 색상 추출기 (Image Color Picker)

이미지 색상 추출기는 사진이나 그림을 불러와 원하는 지점의 색상을 간편하게 확인할 수 있는 무료 웹 도구입니다.
이미지 위의 확대 스포이드를 움직여 색상을 선택하고 HEX, RGB, HSL 색상 코드를 실시간으로 확인할 수 있습니다.

추출한 색상 코드는 바로 복사할 수 있으며, 여러 색상으로 구성된 팔레트 이미지도 만들어 활용할 수 있습니다.
웹디자인, 일러스트, 브랜딩, 콘텐츠 제작에 필요한 이미지 색상을 빠르고 정확하게 찾아보세요.

image-color-picker.jpg

Color & Contrast Visualizer

Color & Contrast Visualizer는 웹 디자인의 색상 조합과 텍스트 가독성을 실시간 프리뷰로 확인하는 웹 기반 컬러 툴입니다.
컬러·그레이·그라데이션 모드와 16단계 프리셋, 미세 조절 슬라이더로 원하는 색상을 정교하게 다듬을 수 있습니다.

메뉴, 본문, UI 요소에 적용된 색상 대비를 즉시 검토하고 HEX 코드를 단 한 번의 클릭으로 복사해 보세요.

color-visualizer.jpg

색상 코드(Color Code)란 무엇인가요?

색상 코드는 웹 디자인, 그래픽 디자인, 앱 UI/UX 제작 등에서 색상을 정확하게 표현하기 위한 표기 방식입니다.

이 색상코드기를 사용하면 원하는 색상을 직접 선택하고, 해당 색상의 HEX, RGB, HSL, HSV 값을 실시간으로 확인할 수 있습니다.
복사 기능을 통해 선택한 색상 코드를 바로 사용할 수 있어 디자인 작업의 효율을 높여줍니다.​

색상코드기의 활용 및 사용 방법

이 색상코드는 포토샵 스타일의 색상 선택 방식을 제공합니다.
왼쪽의 색상판에서 밝기와 채도를 조절하고, 오른쪽의 슬라이더에서 색상(Hue)을 선택하면 원하는 색상을 정밀하게 고를 수 있습니다.

선택한 색상은 즉시 미리보기로 표시되며, HEX, RGB, HSL, HSV 형식의 색상 코드가 함께 출력됩니다.
웹사이트 제작, CSS 스타일 지정, 디자인 시안 작업 등 다양한 상황에서 활용할 수 있습니다.

HEX 색상 코드란?

HEX 색상 코드는 웹에서 가장 널리 사용되는 색상 표기 방식으로, #RRGGBB 형식을 사용합니다.
각각 빨강(R), 초록(G), 파랑(B)의 강도를 16진수로 표현하며, CSS와 HTML에서 기본적으로 사용됩니다.​

예시:

  • #FFFFFF → 흰색

  • #000000 → 검은색

  • #FF0000 → 빨간색

기본 색상 코드 목록

아래는 웹 디자인에서 자주 사용되는 기본 색상 코드 목록입니다.

  • 흰색 : #FFFFFF

  • 검은색 : #000000

  • 빨간색 : #FF0000

  • 초록색 : #00FF00

  • 파란색 : #0000FF

  • 노란색 : #FFFF00

  • 회색 : #808080

  • 주황색 : #FFA500

  • 분홍색 : #FFC0CB

  • 보라색 : #800080

RGB 색상 코드란?

RGB 색상 코드는 빨강(Red), 초록(Green), 파랑(Blue)의 값을 0~255 범위의 숫자로 표현합니다.
이미지 처리나 자바스크립트, 캔버스(Canvas) 작업에서 자주 사용됩니다.

​

예시:

  • rgb(255, 255, 255) → 흰색

  • rgb(0, 0, 0) → 검은색

  • rgb(255, 0, 0) → 빨간색

HSL 색상 코드란?

HSL 색상 코드는 색상(Hue), 채도(Saturation), 밝기(Lightness)로 색을 표현합니다.
사람이 색을 인지하는 방식과 유사해 디자인 감각적으로 색을 조절하기에 매우 편리합니다.

  • Hue(색상): 0~360°

  • Saturation(채도): 0~100%

  • Lightness(밝기): 0~100%

​

예시:

  • hsl(0°, 100%, 50%) → 빨간색

HSV 색상 코드란?

HSV 색상 코드는 색상(Hue), 채도(Saturation), 명도(Value) 기반의 색상 모델입니다.
그래픽 툴과 색상 선택기에서 많이 사용되며, 밝고 선명한 색 조합을 만들 때 유용합니다.

  • Hue(색상): 0~360°

  • Saturation(채도): 0~100%

  • Value(명도): 0~100%

​

예시:

  • hsv(0°, 100%, 100%) → 빨간색

​추천 팔레트

Forest Deep

짙은 숲속의 고요한 그린

#081C15

#1B4332

#74C69D

#D8F3DC

Ocean Breeze

시원하고 청량한 바다 블루

#0077B6

#00B4D8

#90E0EF

#CAF0F8

Vintage Wine

깊은 와인 빛과 고풍스런 골드

#641220

#E09F3E

#FFF3B0

#335C67

Acid Lemonade

톡 쏘는 레몬과 스트릿 그레이

#DFFF00

#2B2D42

#8D99AE

#EDF2F4

Sakura Mist

부드러운 파스텔 핑크와 보라

#FFB7C5

#F8EDEB

#D8E2DC

#B298DC

Midnight Cyber

테크니컬한 다크모드 컬러

#0F172A

#334155

#38BDF8

#818CF8

Sahara Earth

따뜻한 모래와 대지의 톤

#BC6C25

#DDA15E

#FEFAE0

#606C38

Nordic Winter

차분한 북유럽 블루 & 그레이

#2E3440

#4C566A

#88C0D0

#ECEFF4

bottom of page