Automatically matches a foreground color based on the selected background color.

Source: Internet
Author: User

Write again recentlyCodeIt feels good.

OK, a page. If you want to create a custom template, you can adjust the color of the template directly. After searching, we found that jquery minicolors works well. Then, if you want to make it difficult to select the background and then select the foreground, it may be ugly. Then, you can automatically match the background color with the same color.

If RGB is used directly, it is troublesome, but the color has another representation method: HSL. The three parameters l are brightness. If the user chooses a dark color, then you can turn l up to get a color that can be reversed. If the user chooses a color, then turn l down to get a dark color for comparison. Based on this idea, find an HSL <-> RGBAlgorithmVery easy, like http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

Then a short piece of code can be:

Function Getcontrastcolor (RGB ){
VaR HSL = rgbtohsl (RGB. R, RGB. G, RGB. B );
HSL [2] = (HSL [2] + 0.5) % 1.0;
VaR New_rgb = hsltorgb. Apply ( This , HSL );
Return ['Rgb (', parseint (new_rgb [0]),', ', parseint (new_rgb [1]),', ', parseint (new_rgb [2]),') ']. join ('');
}

//

Complete example:

<! Doctype html >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8" />
< Title > </ Title >
< Link REL = "Stylesheet" Type = "Text/CSS" Href = "Http://labs.abeautifulsite.net/jquery-miniColors/jquery.miniColors.css" > </ Link >
< Style Type = "Text/CSS" >
# Stage {
Margin-left : 300px ;
Width : 200px ;
Height : 100px ;
Font-size : 32px ;
}

</ Style >
< Script SRC = "Scripts/jquery-1.8.2.js" > </ Script >
< Script SRC = "Http://labs.abeautifulsite.net/jquery-miniColors/jquery.miniColors.js" > </ Script >
< Script SRC = "Scripts/hsl2rgb. js" > </ Script >
< Script Type = "Text/JavaScript" >
Function Getcontrastcolor (RGB ){
VaR HSL = rgbtohsl (RGB. R, RGB. G, RGB. B );
HSL [2] = (HSL [2] + 0.5) % 1.0;
VaR New_rgb = hsltorgb. Apply ( This , HSL );
Return ['Rgb (', parseint (new_rgb [0]),', ', parseint (new_rgb [1]),', ', parseint (new_rgb [2]),') ']. join ('');
}

FunctionColorhandler (Hex, RGB ){
Certificate ('audio stage'0000.css ({'color': Hex, 'backgroundcolor': getcontrastcolor (RGB )});
}

$ (Function(){
$ ('. Color-picker'). minicolors ({
Change: colorhandler,
Open: colorhandler,
Close: colorhandler
});
});
</Script>

</ Head >
< Body >
< Input Type = "Text" Name = "Color1" Class = "Color-picker" Size = "7" AutoComplete = "On" Value = "# Fff"   />
< Div ID = "Stage" >
Welcome!
</ Div >
</ Body >
</ Html >

Hsl2rgb. JS:

View code /* *

* Converts an RGB color value to HSL. Conversion Formula

* Adapted from http://en.wikipedia.org/wiki/HSL_color_space.

* Assumes R, G, and B are contained in the set [0,255] and

* Returns H, S, and l in the set [0, 1].

*

* @ Param number r the red color value

* @ Param number g the green color value

* @ Param number B the blue color value

* @ Return array the HSL Representation

 */

FunctionRgbtohsl (R, G, B ){

R/= 255, G/= 255, B/= 255;

VaRMax = math. Max (R, G, B), min = math. Min (R, G, B );

VaRH, S, L = (MAX + min)/2;

If(Max = min ){

H = s = 0;//Achromatic

}Else{

VaRD = max-min;

S = L> 0.5? D/(2-max-min): D/(MAX + min );

Switch(Max ){

CaseR: H = (G-B)/d + (G <B? 6: 0 );Break;

CaseG: H = (B-r)/d + 2;Break;

CaseB: H = (r-g)/d + 4;Break;

}

H/= 6;

}

Return[H, S, l];

}

/**

* Converts an HSL color value to RGB. Conversion Formula

* Adapted from http://en.wikipedia.org/wiki/HSL_color_space.

* Assumes H, S, and l are contained in the set [0, 1] and

* Returns R, G, and B in the set [0,255].

*

* @ Param number h the hue

* @ Param number S the saturation

* @ Param number l the lightness

* @ Return array the RGB Representation

 */

FunctionHsltorgb (H, S, L ){

VaRR, G, B;

If(S = 0 ){

R = G = B = L;//Achromatic

}Else{

FunctionHue2rgb (p, q, T ){

If(T <0) T + = 1;

If(T> 1) T-= 1;

If(T <1, 1/6)ReturnP + (Q-p) * 6 * t;

If(T <1, 1/2)ReturnQ;

If(T <1, 2/3)ReturnP + (Q-p) * (2/3-t) * 6;

ReturnP;

}

VaRQ = L <0.5? L * (1 + S): L + S-L * s;

VaRP = 2 * l-Q;

R = hue2rgb (p, q, H + 1/3 );

G = hue2rgb (p, q, H );

B = hue2rgb (p, q, h-1/3 );

}

Return[R * 255, G * 255, B * 255];

}

/**

* Converts an RGB color value to HSV. Conversion Formula

* Adapted from http://en.wikipedia.org/wiki/HSV_color_space.

* Assumes R, G, and B are contained in the set [0,255] and

* Returns H, S, and V in the set [0, 1].

*

* @ Param number r the red color value

* @ Param number g the green color value

* @ Param number B the blue color value

* @ Return array the HSV Representation

 */

FunctionRgbtohsv (R, G, B ){

R = r/255, G = g/255, B = B/255;

VaRMax = math. Max (R, G, B), min = math. Min (R, G, B );

VaRH, S, V = max;

VaRD = max-min;

S = max = 0? 0: D/max;

If(Max = min ){

H = 0;//Achromatic

}Else{

Switch(Max ){

CaseR: H = (G-B)/d + (G <B? 6: 0 );Break;

CaseG: H = (B-r)/d + 2;Break;

CaseB: H = (r-g)/d + 4;Break;

}

H/= 6;

}

Return[H, S, V];

}

/**

* Converts an HSV color value to RGB. Conversion Formula

* Adapted from http://en.wikipedia.org/wiki/HSV_color_space.

* Assumes H, S, and V are contained in the set [0, 1] and

* Returns R, G, and B in the set [0,255].

*

* @ Param number h the hue

* @ Param number S the saturation

* @ Param number v The Value

* @ Return array the RGB Representation

 */

FunctionHSV torgb (H, S, v ){

VaRR, G, B;

VaRI = math. Floor (H * 6 );

VaRF = H * 6-I;

VaRP = V * (1-S );

VaRQ = V * (1-f * s );

VaRT = V * (1-(1-f) * s );

Switch(I % 6 ){

Case0: r = V, G = T, B = P;Break;

Case1: r = Q, G = V, B = P;Break;

Case2: r = P, G = V, B = T;Break;

Case3: r = P, G = Q, B = V;Break;

Case4: r = T, G = P, B = V;Break;

Case5: r = V, G = P, B = Q;Break;

}

Return[R * 255, G * 255, B * 255];

}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.