HTML Color Codes

RGB, HEX, HSL 포맷을 위한 HTML 색상 선택기

웹사이트에서 사용할 HTML CSS 색상 코드를 손쉽게 가져오고, 색상 포맷을 HEX, RGB, HSL, HSV 간에 변환할 수 있습니다.

색상 선택

색상 값 입력

또는 HTML5 선택기 사용

선택한 색상

레드: 0
그린: 255
블루: 255
HUE (도): 180
밝기: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
색상 그룹: Cyan
공유하기:
CSS3 색상 예시

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
가장 어두운 및 밝게하는 스타일

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

이미지에서 색상 가져오기

get pixel color from pic

색상 선택 및 팔레트 만들기

select color and create palette

HTML 색상 코드란 무엇입니까?

HTML 색상 코드는 웹 디자인에서 색상을 지정하는 방법입니다. 이 코드는 HTML 및 CSS에서 텍스트, 배경, 테두리 등의 요소의 색상을 정의하는 데 사용됩니다. HTML 색상 코드를 이해하는 것은 시각적으로 매력적이고 일관된 웹 페이지를 만드는 데 필수적입니다.

예를 들어, 빨간색은 다음과 같은 형식으로 식별할 수 있습니다:

HTML 색상 코드의 유형


16진수 색상 코드:
  • HTML 및 CSS에서 색상을 지정하는 가장 일반적인 방법은 16진수(HEX) 색상 코드를 사용하는 것입니다. 16진수 색상 코드는 빨강, 초록, 파랑(RGB) 구성 요소의 혼합으로 정의된 숫자와 문자로 구성된 6자리 조합입니다.
  • 형식: #RRGGBB
  • 예: #FF5733는 주황색의 한 색조를 나타냅니다.
  • 각 자리쌍은 각각 00 (강도 없음)에서 FF (최대 강도)까지의 스케일에서 빨강, 초록, 파랑의 강도를 나타냅니다.
RGB 색상 코드:
  • RGB 색상 코드는 빨강, 초록, 파랑 구성 요소를 기준으로 색상을 정의합니다.
  • 형식: rgb(빨강, 초록, 파랑)
  • 예: rgb(255, 87, 51)은 #FF5733의 RGB 등가입니다.
  • 각 구성 요소(빨강, 초록, 파랑)는 0에서 255 사이의 숫자로 지정됩니다.
RGBA 색상 코드:
  • RGB와 유사하지만 불투명도를 위한 알파 구성 요소가 포함됩니다.
  • 형식: rgba(빨강, 초록, 파랑, 알파)
  • 예: rgba(255, 87, 51, 0.5)는 동일한 색상을 50% 불투명도로 지정합니다.
HSL 색상 코드:
  • HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)를 의미합니다.
  • 형식: hsl(색상, 채도%, 밝기%)
  • 예: hsl(9, 100%, 60%)는 #FF5733 색상을 나타내는 또 다른 방법입니다.
  • 색상은 색상 휠에서의 각도(0도에서 360도까지)를 나타내며, 채도는 백분율로 나타내며(0%는 회색조, 100%는 전체 색상), 밝기도 백분율로 나타냅니다(0%는 검정, 100%는 흰색).
HSLA 색상 코드:
  • HSL과 유사하지만 불투명도를 위한 알파 구성 요소가 포함됩니다.
  • 형식: hsla(색상, 채도%, 밝기%, 알파)
  • 예: hsla(9, 100%, 60%, 0.5)는 동일한 색상을 50% 불투명도로 지정합니다.
HTML 색상 코드 사용법:

HTML 색상 코드는 다양한 CSS 속성에서 웹 요소를 스타일링하는 데 사용할 수 있습니다. 예를 들어:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

이 예에서 텍스트, 배경 및 테두리는 모두 동일한 주황색 음영을 나타내는 다른 유형의 HTML 색상 코드를 사용하여 스타일링됩니다.

HTML 색상 코드는 웹 디자인의 기본적인 측면으로, 개발자가 색상을 정밀하게 정의하고 조작할 수 있게 합니다. 16진수, RGB, RGBA, HSL 및 HSLA 색상 코드를 이해함으로써, 시각적으로 일관되고 매력적인 웹 페이지를 생성하여 사용자 경험을 향상시킬 수 있습니다.