HTML 색상 선택기

모두가 알고 있듯이 HTML은 브라우저에 텍스트를 표시하는 데 사용되며 JavaScript 및 CSS와 같은 특수 지원 스크립트의 도움으로 해당 콘텐츠를 보기 좋게 만드는 데 사용됩니다. 색상 코딩은 HTML 웹 페이지를 아름답게 만드는 작업의 일부입니다.

HTML의 색상 코드는 웹에서 해당 색상을 식별하고 나타내는 식별자 역할을 합니다. 일반적으로 사용되는 색상 코딩은 해당 색상에 대한 '16진수' 코드를 나타내는 HEX입니다. 마찬가지로 'Red, Green, Blue'의 약자인 RGB와 같은 다른 색상 코드도 있습니다. HSL이라는 또 다른 색상 코드는 'Hue, Saturation, Lightness'의 약자입니다. HSL은 원하는 색상을 선택할 때 추가적인 이점을 제공합니다.

일반적으로 16진수 코드 사용을 선호하므로 16진수 코드에 대해 최선을 다해 설명했습니다. 16진수 색상 코드에는 기호, 해시( # ) 및 6자리 숫자 또는 숫자 집합이 포함됩니다. 16진수 체계이므로 'FF'가 가장 높은 숫자이며 16진수 체계에서 '255'를 나타냅니다.

이 6자리 숫자에는 RB 색상 코드를 나타내는 3쌍이 포함되어 있습니다. 이 6자리 숫자 중 첫 번째 두 자리 숫자 쌍은 '빨간색' 색상의 강도를 나타냅니다. 따라서 첫 번째 쌍의 위치에 대한 'FF'는 최대 강도의 빨간색을 나타냅니다. 가장 낮은 강도에는 '00', 가장 높은 강도에는 'FF'가 사용됩니다. '녹색' 색상을 얻으려면 중간 쌍이 강도를 나타냅니다.

마찬가지로 'Blue'의 경우 마지막 쌍이 강도를 나타냅니다.

• 따라서 #FF0000과 같은 16진수는 다음과 같습니다.  
• #00FF00과 같은 16진수는 다음과 같습니다.    
• #0000FF와 같은 16진수는 다음과 같습니다.  
• '빨간색'과 '녹색'이 결합된 노란색을 얻으려면 #FFFF00과 같이 유사한 16진수 숫자가 생성됩니다.

HTML 색상 선택기

색상 선택기를 만들면 사용자는 자신이 선택한 색상을 '선택할 수 있습니다. 가장 표준적인 색상 선택기는 MS Word, Paint 등과 같은 Windows 응용 프로그램에서 사용됩니다. 여러분 모두는 색상 선택기에 익숙합니다. 아래 사진을 보시면 기억을 되짚어 보실 수 있습니다:

"color" 입력 유형은 색상을 포함하는 입력 필드를 만드는 데 사용됩니다. 그러나 Internet Explorer 11 및 이전 버전과 같은 일부 브라우저는 이 입력 유형을 지원하지 않습니다. 따라서 브라우저에 따라 입력 유형을 사용할 때 색상 선택기가 팝업됩니다. 일부 브라우저에서는 이 입력 필드를 아래와 같은 텍스트 상자로 간단히 전환합니다.

따라서 지원되는 브라우저를 사용하는 경우 동일한 코드로 인해 다음 색상 선택기 팔레트가 생성됩니다.

그리고 해당 색상 상자를 클릭하면 색상 팔레트가 나타납니다. 여기서는 입력 유형 색상 속성을 지원하는 Google Chrome 버전 '78.0.3904.97'을 사용하고 있습니다.

이러한 색상 선택기를 생성하는 코드는 다음 섹션에서 설명합니다.

색상 선택기 생성 소스 코드

다음은 HTML에서 가장 간단한 색상 선택기를 만드는 방법에 대한 설명입니다. 아래 코드를 참조하세요.

코드

Select your favorite color:

위 HTML 코드에는 'color'라는 입력 유형을 사용하는 FORM 요소가 포함되어 있습니다. 이 색상 입력 유형은 가장 간단한 색상 선택기인 Windows 표준 색상 선택기를 생성하고 표시합니다. 사용자가 원하는 색상을 선택할 수 있습니다.

색상 입력 유형은 기본 배경색이 '검은색'인 텍스트 상자 또는 그 이상의 버튼을 생성합니다. 클릭하면 사용자에게 색상 선택 사항이 표시됩니다.

아래 색상 선택기의 작동 방식을 관찰하세요.

1단계: 기본 배경색이 '검은색'인 버튼을 클릭합니다.

위 코드는 위와 같은 버튼을 생성합니다.

2단계: 클릭하여 새 색상을 선택하세요.

3단계: 시연을 위해 밝은 녹색을 선택했습니다. '확인 버튼을 클릭하세요.

In the above screen-shots, you can easily see the selected color is shown in the last screen-shot.

The input type ‘color’ provides this simple functionality of a color picker in HTML5. After picking your color, it is your choice of what the selected color can be used for.

In the following example, I incremented the above example and modified it with some inclusions.

The following example is a combination of HTML and Javascript. This example has a FORM element that uses the input type ‘color’ tag. This FORM, when submitted, our JAVASCRIPT is triggered.

Observe the source code for the FORM element below:

Code:

Select your favorite color:

We added a new line to our previous program. A submit button. This submit button is when clicked; our Java script is triggered, which is given below:

function ReturnColor(c)
{
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code.
document.write(str+c);
}

When the ‘Submit’ button is clicked, our function in javascript is triggered. The above function, ReturnColor (), returns the HEX code, that is, Hexadecimal code for the selected color by our color picker. When the code is executed, the following is our output.

The above output is in the HEX code. The 6 numbers represent the inclusion of Red, Green and Blue colors resulting in the selected color. This HEX code can also be converted easily into RGB code.

Similarly, we can save the above code and set it as a background color or a font color for the user. To do so, we added a few more lines of code into our already existing source code.

Following is the complete code, with the HTML body remaining the same:

<script>
function ReturnColor(c)
{
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code
document.write(str+c);
document.write("<br/>");
//A HEX color code can be converted into RGB code
var R=c.slice(1,3);
var G=c.slice(3,5);
var B=c.slice(5);
//Displaying the corresponding RGB code
document.write("In RGB format, RGB("
+ parseInt(R,16) + ","
+ parseInt(G,16) + ","
+ parseInt(B,16) + ")");
document.write("<br/>");
//Setting our selected color as Font color
var color = c;
var str1 = "Your color will appear as this font color";
var str2 = str1.fontcolor(c);
document.write(str2);
//Setting our selected color as Background color
document.write("<div style='border: solid; height: 90px; width: 90px; background-color:"+color+"'/>");
}
</script>

This is our complete script. When the code is executed, and a color is selected, the following is the output that is displayed.

Conclusion

There are many ways and many combinations that can help you to create a color picker, that too smart one. For example, with the combination of HTML5 and CSS and JavaScript, you can use yet another element called ‘canvas’ that has its own libraries that helps create a lightweight, small and cross-browser color picker. But that’s for another time.

위 내용은 HTML 색상 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!