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

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];

}