광고 차단됨무료 서비스를 지원하려면 광고 차단 기능을 비활성화하세요.

색상 선택 도구

시각적으로 색상을 선택하고 정확한 16진수, RGB, HSL 및 HSV 코드를 즉시 생성합니다. 캔버스를 가로질러 드래그하여 색조를 탐색하거나, 색조와 불투명도를 조정하거나, 기존 색상 코드를 붙여넣어 실시간으로 형식을 변환할 수 있습니다. 설계 소프트웨어나 구성이 필요하지 않고 프로젝트의 정확한 색상 값을 몇 초 만에 선택, 변환 및 복사하기만 하면 됩니다.

유틸리티v1.0.0

색상 선택기

시각적으로 색상을 선택하거나, 불투명도를 조정하거나, HEX, RGB, HSL 또는 HSV 코드를 붙여넣을 수 있습니다. 네 가지 형식 출력은 모두 실시간으로 업데이트됩니다.

컬러 캔버스

색조

불투명도 - 100%

사전 설정

출력

HEX
#398FE6
RGB
rgb(57, 143, 230)
HSL
hsl(210, 78%, 56%)
HSV
hsv(210, 75%, 90%)

색상 코드 붙여넣기

HEX, #RRGGBBAA, rgb(), rgba(), hsl(), hsla(), hsv(), hsb()를 허용합니다

모두 복사

hex:  #398FE6
rgb:  rgb(57, 143, 230)
hsl:  hsl(210, 78%, 56%)
hsv:  hsv(210, 75%, 90%)

비주얼 컬러 캔버스

채도-밝기 캔버스에서 십자선을 드래그하여 픽셀 단위로 정밀하게 음영을 선택할 수 있습니다.

4가지 포맷 출력

모든 선택 항목은 불투명도가 100% 미만일 때 알파를 포함하여 HEX, RGB, HSL 및 HSV 값을 즉시 생성합니다.

100% 비공개

모든 처리는 브라우저에서 이루어집니다. 색상 값은 서버로 전송되거나 기록되지 않습니다.

가이드

색상 선택 및 변환 방법

1

캔버스 드래그

색상 캔버스에서 아무 곳이나 클릭하거나 드래그하여 현재 색조의 채도와 밝기를 선택합니다.

2

색조 및 불투명도 조정

무지개 색조 막대를 사용하여 기본 색상을 변경하고 바둑판 불투명도 막대를 사용하여 투명도를 설정합니다.

3

출력 코드 읽기

HEX, RGB, HSL 및 HSV 값이 실시간으로 업데이트됩니다. 불투명도가 100% 미만인 경우 알파 채널이 코드에 포함됩니다.

4

모든 형식 복사

출력 행 옆에 있는 복사 버튼을 클릭하거나 아래 입력란에 알려진 색상 코드를 붙여넣으면 해당 색상으로 바로 이동합니다.

광고 차단됨무료 서비스를 지원하려면 광고 차단 기능을 비활성화하세요.
사용 사례

누가 색상 선택기를 사용하나요?

UI 및 웹 디자이너

브라우저에서 나가지 않고도 브랜드 색상을 샘플링하고 CSS, 테일윈드 또는 디자인 시스템에 대한 정확한 코드를 복사할 수 있습니다.

프론트엔드 개발자

CSS 사용자 정의 프로퍼티, Tailwind 임의 값 또는 캔버스 API를 위해 HEX와 RGB/HSL 간에 변환합니다.

그래픽 디자이너

피그마 또는 포토샵 HSB 값을 한 번에 웹에서 사용 가능한 HEX 또는 RGB 코드로 변환할 수 있습니다.

콘텐츠 제작자

썸네일, 프레젠테이션 또는 문서에 완벽한 강조 색상을 찾고 코드를 즉시 복사하세요.

접근성 검토자

정확한 색상 값을 확인하여 텍스트와 배경 쌍의 대비 비율 및 WCAG 준수 여부를 확인합니다.

AI 프롬프트 엔지니어

이미지 생성 프롬프트에서 색상을 설명할 때 정확한 16진수 코드를 식별하여 정확한 결과를 얻으세요.

광고 차단됨무료 서비스를 지원하려면 광고 차단 기능을 비활성화하세요.
비교

끝없는 단조와 다른 색상 도구

즉시, 비공개, 형식 완성 - 전적으로 브라우저에서 작동합니다.

기능
기타 도구평균
끝없는 대장간이 웹사이트
시각적 캔버스 선택기
제로 서버 처리
아니요
알파/불투명도 채널
Sometimes
HSV 출력 형식
Sometimes
변환할 형식 붙여넣기
아니요
무료 사용
Limited
광고 차단됨무료 서비스를 지원하려면 광고 차단 기능을 비활성화하세요.

하나의 도구, 모든 색상 형식

Endless Forge 색상 선택기는 여러 도구를 돌아다니지 않고도 정확하고 형식에 맞는 색상값을 찾아야 하는 개발자와 디자이너를 위해 설계되었습니다. Figma HSB 견본을 CSS HEX 변수로 변환하거나 브랜드 색상의 정확한 RGBA 분석을 확인하는 등 모든 작업이 디바이스를 떠나지 않고 브라우저에서 즉시 이루어집니다.
광고 차단됨무료 서비스를 지원하려면 광고 차단 기능을 비활성화하세요.
탐색

더 많은 유틸리티 및 개발자 도구

광고 차단됨무료 서비스를 지원하려면 광고 차단 기능을 비활성화하세요.
자주 묻는 질문

자주 묻는 질문

선택기는 HEX(#RRGGBB / #RRGGBBAA), RGB / RGBA, HSL / HSLA 및 HSV를 출력합니다. 붙여넣기 입력은 이 모든 것을 허용합니다.
HSV(색조, 채도, 값)는 피그마 및 포토샵과 같은 디자인 도구에서 사용됩니다. HSL(색조, 채도, 명도)은 CSS의 기본 색상입니다. 두 가지 모두 색상을 다르게 표현하지만 수학적으로 변환할 수 있습니다.
HEX 값을 입력 필드에 붙여넣기(# 접두사 포함 또는 제외)하면 도구가 즉시 해당 RGB 및 HSL 값을 계산하여 표시합니다. 변환은 수학적이며 무손실로 이루어지므로 모호함이나 근사치가 없습니다. 그런 다음 원하는 형식 옆에 있는 복사 버튼을 클릭하여 필요한 값을 가져올 수 있습니다. 이미지에 색상을 통합하고 이미지 형식 간 변환을 위해 이미지 변환기는 PNG, JPG, WebP 및 AVIF 변환을 처리합니다.
예. 입력 필드에 HEX, RGB, RGBA, HSL, HSLA, HSV 또는 HSB 값을 붙여넣거나 입력하면 선택기가 즉시 일치하도록 업데이트됩니다.
예. 색상 선택기에는 완전 투명(0)에서 완전 불투명(1)까지 불투명도를 설정할 수 있는 알파 채널 슬라이더가 있습니다. 1 이외의 알파 값을 설정하면 출력 형식이 해당 알파 인식 변형(RGB의 경우 rgba(), HSL의 경우 hsla())으로 전환됩니다. HEX 형식은 알파를 위해 두 개의 추가 문자가 포함된 8자 16진수 코드도 지원합니다. SVG 코드에 직접 포함할 색상 값을 생성하려면 코드 포맷터를 사용하여 SVG 소스를 정리하고 포맷할 수 있습니다.

5 질문에 대한 답변

광고 차단됨무료 서비스를 지원하려면 광고 차단 기능을 비활성화하세요.
Startup Fame Verification