[HTML] 웹 컬러 도구 사이트

CSS로 웹을 디자인하면 색감에 대해 고민을 많이 하게 됩니다.

어떤 색이 예쁜 색인지, 어떤 색이 잘 보이는 색인지 잘 모를 때가 많습니다.

 

이번에 소개할 사이트 3가지는

html의 네임드컬러, RGB코드, Hex코드, Hsl코드 등

쉽게 정보를 얻을 수 있고, 색 선택에 도움을 주는 사이트입니다.

 

✅
이 포스팅은 더 좋은 정보가 있으면 갱신하는 사이트입니다.
만약 소개드린 사이트 이외 좋은 내용 있어서 덧글로 알려주신다면 감사드립니다.

 

 

 

 

 

 

728x90

---

w3schools HTML Color Picker

www.w3schools.com/colors/colors_picker.asp

HTML Color Picker

 

선택한 색이 배경색으로 들어갔을 때,

그 태그 영역의 글자가 어떻게 보이는지 확인하기에 좋은 툴입니다.

 

그래서 UX에 고려한 디자인을 만들기에 좋습니다.

그리고 색선택은 물론 선택한 색의 컬러코드, 컬러 네임, rgb를 모두 알 수 있습니다.

Lighter / Darker 영역에서는 선택한 색의 명도에 따른 표와 Hex 코드를 알 수 있습니다.

 

 

 

---

 

위의 Pick a Color와 Lighter / Darker에서 선택한 속성에 따라

아래의 표가 변합니다.

 

다양한 색과, 선택한 색에 대한 명도, 채도를 보여줍니다.

그래서 선택한 색의 컬러 스펙트럼을 한눈에 보기 좋은 사이트 입니다. 

 

 

 

 

 

 

 

 

---

html color codes

제가 정말 많이 사용하는 사이트입니다.

선택한 색의 정보와 어울리는 색을 추천해주고, 색깔을 선택하는 방법과 튜토리얼 등 알려줍니다.

 

htmlcolorcodes.com/

HTML Color Codes

html color codes 컬러피커

---

 

 

가장 많이 사용하는 기능은 상단 메뉴의 Chart 부분과 Names 부분입니다.

Chart 메뉴는 예쁘고 다양한 색을 테이블로 보여주어 색감이 없어도 마음에 드는 색을 쉽게 선택할 수 있습니다.

Chart 팔레트

 

---

 

Names 메뉴로 들어가면 HTML에서 공식적으로 이름이 붙은 색을 여러 개의 테이블로 한 번에 볼 수 있습니다.

저는 이 메뉴를 가장 많이 사용합니다.

HTML 네임드 컬러들은 CSS로 작성이 되면, 가독성도 좋고 예쁜색깔들이 많기 때문입니다.

 

 

 

 

 

 

 

 

 

---

image color picker

imagecolorpicker.com/

👍 Color Picker online | HEX Color Picker | HTML Color Picker

 

이 사이트는 이미지의 예쁜 컬러를 추출해주는 똑똑한 사이트입니다.

어떤 예쁜 이미지에 색을 추출해야 하는데 어떤 색을 추출해야 할지 막막할때

이 사이트를 사용하면 좋습니다.

 

 

파스텔톤 풍경사진을 올렸을 때, 아래의 팔레트로 색을 추출해주는 모습

위의 사진을 보면 파스텔톤 풍경 사진을 업로드하면 그 안의 색들을 추출하는 것을 보여줍니다.

웹사이트가 특정 사진으로 테마를 꾸미고 싶다면 아주 유용한 툴이 될 수 있습니다.