HTML, CSS에서 활용 가능한 색상표, 컬러코드 사용법 및 추천 사이트

HTML, CSS에서 활용 가능한 색상표, 컬러코드 사용법 및 추천 사이트

티스토리나 블로그스팟, 워드프레스 블로그에서 HTML를 통한 커스터마이징을 많이 하고 있다.

컬러표를 사용하는 방법과 컬러표를 확인할 수 있는 무료 사이트를 정리해서 공유해본다.

HTML에서 컬러표 사용법

1. 색상 이름: HTML에서는 140개 이상의 색상 이름을 지원합니다. 예를 들어, red, blue, green 등이 있습니다.

<p style="color: red;">이 문장은 빨간색입니다.</p>

 

2. HEX 코드: 색상을 16진수로 표현하는 방법입니다. #RRGGBB 형식으로, RR은 빨강, GG는 초록, BB는 파랑의 값을 나타냅니다

<p style="color: #ff0000;">이 문장은 빨간색입니다.</p>

 

3. RGB 값: 빨강, 초록, 파랑의 값을 0에서 255 사이의 숫자로 지정합니다.

RGB 값: 빨강, 초록, 파랑의 값을 0에서 255 사이의 숫자로 지정합니다.

 

4. HSL 값: 색상(Hue), 채도(Saturation), 명도(Lightness)를 사용하여 색상을 정의합니다.

<p style="color: hsl(0, 100%, 50%);">이 문장은 빨간색입니다.</p>

HTML에서 색상을 지정하는 방법은 여러 가지가 있다. 가장 일반적인 방법은 색상 이름, HEX 코드, RGB 값, HSL 값을 사용하는 것이며, 위의 방법에서 자신에게 맞는방법을 하나씩 활용해보길 바란다.

---

컬러표 확인 가능한 무료 사이트

1. W3Schools Color Picker
   

   

   • URL: W3Schools Color Picker
   • 설명: 사용자가 원하는 색상을 선택하고, 해당 색상의 HEX, RGB, HSL 값을 확인할 수 있습니다.
2. ColorHexa
   

   

   
   
   
   • URL: ColorHexa
   • 설명: 색상에 대한 상세 정보를 제공하며, 색상 조합, 변형, 대조 색상 등을 쉽게 찾을 수 있다.
3. Adobe Color
   

   

   • URL: Adobe Color
   • 설명: 색상 조합을 만들고, 다양한 색상 테마를 탐색할 수 있는 도구입니다. 색상 이론에 대한 정보도 제공한다.
4. Coolors
   

   

   • URL: Coolors
   • 설명: 색상 팔레트를 생성하고, 다양한 색상 조합을 실험할 수 있는 사이트입니다. 사용자가 쉽게 색상을 조합할 수 있도록 도와준다.
5. HTML Color Codes
   

   

   • URL: HTML Color Codes
   • 설명: 다양한 색상 코드와 그에 대한 정보를 제공하며, 색상 선택기와 색상 조합 도구도 포함되어 있다.
6. Color Hunt
   

   

   
   
   • URL: Color Hunt
   • 설명: 다양한 색상 팔레트를 제공하며, 사용자가 좋아하는 색상 조합을 쉽게 찾을 수 있다.
7. Material Design Color Tool
   

   

   • URL: Material Design Color Tool
   • 설명: 구글의 머티리얼 디자인 색상 시스템을 기반으로 색상 조합을 만들고, 색상 대비를 확인할 수 있는 도구다.

 

---

마무리

HTML에서 색상을 지정하는 방법은 다양하며, 각 방법에 따라 색상을 표현할 수 있다.

위에서 소개한 무료 사이트들은 색상 선택과 조합을 도와주는 유용한 도구들입니다. 이러한 도구들을 활용하여 블로그를 더 가독성이 높고, 화려하고 세련되게 꾸밀 수 있다.

블로그 꾸미기 게시물 목록보기