보색 구하기 complementary color , Opposite Color

COLOR	OPPOSITE
00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF 00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF 00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF

- 소스

<script>
/* FREQUENTLY USED PAGE SCRIPTS */
function valid_color(c) {
    var re = new RegExp("[0-9A-F]{6}","i");
    return c.match(re);
}
function set_uppercase(field) {
    field.value = field.value.toUpperCase();
}


// UPDATE DISPLAY:
function update_samples() {
    var mixer = document.mixer;
    var color = mixer.enter.value; var result = opposite(color);
    mixer.sample1.style.backgroundColor = '#'+color;
    mixer.sample2.style.backgroundColor = '#'+result; mixer.result.value = result;
}
function update_field() {
    var mixer = document.mixer;
    var color = mixer.c_1.value + mixer.c_2.value + mixer.c_3.value;
    mixer.enter.value = color;
    enter_color(mixer.enter);
}
// UPDATE SELECT BOXES:
function set_selectbox(box, first_char) {
    for(var i=0; i<box.options.length; i++) {
        if(box.options[i].value.substring(0,1)==first_char) { box.options[i].selected=true; break; }
    }
}
function update_selectbox() {
    var mixer = document.mixer;
    var enter = mixer.enter.value;
    var e1 = enter.substring(0,1); var e2 = enter.substring(2,3); var e3 = enter.substring(4,5);
    set_selectbox(mixer.c_1,e1); set_selectbox(mixer.c_2,e2); set_selectbox(mixer.c_3,e3);
}
// CALCULATE OPPOSITE:
function opposite(c) {
    var result=''; var ch=''; var list1='0123456789ABCDEF'; var list2='FEDCBA9876543210';
        for(var i=0;i<c.length;i++) { ch=c.charAt(i); for(var n=0;n<list1.length;n++){ if(ch==list1.charAt(n)) result += list2.charAt(n); } }
    return result;
}
// PROCESS INPUT:
function submit_action() {
    var field = document.mixer.enter;
    if(!valid_color(field.value) || field.value.length<6) field.value='000000';
    enter_color(field);
}
function enter_color(source) {
    sample = document.mixer.sample1;
    if(valid_color(source.value)) { set_uppercase(source); update_samples(); update_selectbox(); }
    else if(source.value.length==6) { source.value = sample.style.backgroundColor.substring(1); }
}
</script>
<form name="mixer" id="mixer" action="javascript:submit_action();">
<table width="350" border="0" align="center" cellpadding="3" cellspacing="0">
    <tr align="center">
        <td width="180"><b>COLOR</b></td>
        <td width="180"><b>OPPOSITE</b></td>
    </tr>
    <tr align="center">
        <td>
            <input type="text" name="sample1" id="sample1" readonly="readonly" style="width:150px;height:90px;border:0px;background-color:#000000;" /></td>
        <td>
            <input type="text" name="sample2" id="sample2" readonly="readonly" style="width:150px;height:90px;border:0px;background-color:#ffffff;" /></td>
    </tr>
    <tr align="center">
        <td>
<input type="text" name="enter" id="enter" style="width:70px;text-align:center;" onkeyup="enter_color(this);" value="000000" size="6" maxlength="6" /><p>
</p>
        </td>
        <td>
            <input type="text" name="result" id="result" size="6" maxlength="6" value="FFFFFF" style="width:70px;text-align:center;" readonly="readonly" />
        </td>
    </tr>
    <tr align="center">
        <td><select name="c_1" onchange="javascript:update_field();">
<option value="00">00</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
<option value="55">55</option>
<option value="66">66</option>
<option value="77">77</option>
<option value="88">88</option>
<option value="99">99</option>
<option value="AA">AA</option>
<option value="BB">BB</option>
<option value="CC">CC</option>
<option value="DD">DD</option>
<option value="EE">EE</option>
<option value="FF">FF</option>
</select> <select name="c_2" onchange="javascript:update_field();">
<option value="00">00</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
<option value="55">55</option>
<option value="66">66</option>
<option value="77">77</option>
<option value="88">88</option>
<option value="99">99</option>
<option value="AA">AA</option>
<option value="BB">BB</option>
<option value="CC">CC</option>
<option value="DD">DD</option>
<option value="EE">EE</option>
<option value="FF">FF</option>
</select> <select name="c_3" onchange="javascript:update_field();">
<option value="00">00</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
<option value="55">55</option>
<option value="66">66</option>
<option value="77">77</option>
<option value="88">88</option>
<option value="99">99</option>
<option value="AA">AA</option>
<option value="BB">BB</option>
<option value="CC">CC</option>
<option value="DD">DD</option>
<option value="EE">EE</option>
<option value="FF">FF</option>
</select> </td>
        <td>
<input type="submit" name="submit" id="submit" class="action" style="width:70px;" onclick="submit_action();" value="Show" />
        </td>
    </tr>
</table>
</form>
　

 

출처 : http://www.colortools.net/color_complementary.html

 

Opposite Color Tool

Two colors are considered complimentary if they produce a neutral color — black, white, or grey — when mixed evenly. But, that is a mouthful. Simply put, a complimentary color has the opposite hue of a given color.

This tool will display the opposite color from a base color, and gives the hexadecimal code for your css/html: