-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
65 lines (62 loc) · 3.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SGB Palette Creator</title>
<meta name="author" content="Matt Braddock">
<meta name="description" content="Create Super Game Boy color palettes from hex color values">
<meta name="keywords" content="sgb, sgb2, super game boy, color palettes">
<link rel='icon' href='img/favicon.ico' type='image/x-icon'/ >
<link rel="stylesheet" href="https://stackedit.io/style.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jscolor.js"></script>
<script src="js/nearestColor.js"></script>
<script src="js/color.const.js"></script>
<script src="js/color.filter.js"></script>
<script src="js/index.js"></script>
</head>
<body class="stackedit">
<div class="stackedit__html">
<h1 id="sgb-colors">Super Game Boy Palette Creator</h1>
<h3>About</h3>
<p>The Super Game Boy has 32 pre-made color palettes and allows for users to create their own palettes. These palettes can be saved and shared with a 12-digit number in the format of <code>XXXX-XXXX-XXXX</code>. Thanks to an existing <a href="https://gamefaqs.gamespot.com/snes/588731-super-game-boy/faqs/58647" target="_blank">guide by Alice Kojiro</a>, the 12-digit code can be broken down into RGB colors for each layer.</p>
<p>This tool aims to allow users to pick colors for each layer, and have a Super Game Boy color code produced using the closest available colors that the Super Game Boy supports. Conversely, a Super Game Boy color code can be supplied and the corresponding layer colors displayed.</p>
<h3>Palette Creator</h3>
<p>Presets:
<select id="presets">
<option value="bw-contrast" selected>Greys High Contrast by bgb</option>
<option value="lcd-green">LCD Green by bgb</option>
<option value="trans-pride">Trans Pride by negativecon</option>
<option value="nonbinary-pride">Nonbinary Pride by negativecon</option>
<option value="bi-pride">Bi Pride by negativecon</option>
<option value="ace-pride">Ace Pride by negativecon</option>
<option value="miami-vice">Miami Vice by dadinfinitum</option>
<option value="springtime">Springtime by dadinfinitum</option>
<option value="last-dance">The Last Dance by dadinfinitum</option>
<option value="straight-ballin">Straight Ballin' by Belthic</option>
<option value="mellow">Mellow by th3squirr3l</option>
</select>
<button onclick="applyPreset()">Apply</button>
</p>
<p><button onclick="randomPalette()">Random Color Palette</button></p>
<div class="img-wrap">
<img id="image-one" class="preview" src="img/layer1.png">
<img id="image-two" class="preview" src="img/layer2.png">
<img id="image-three" class="preview" src="img/layer3.png">
<img id="image-four" class="preview" src="img/layer4.png">
</div>
<p>Layer 1: <input id="layer-one" class="jscolor" value="fff8ff"></p>
<p>Layer 2: <input id="layer-two" class="jscolor" value="b0b0b0"></p>
<p>Layer 3: <input id="layer-three" class="jscolor" value="606060"></p>
<p>Layer 4: <input id="layer-four" class="jscolor" value="000000"></p>
<p><button onclick="colorToCodeBtn()">Convert colors to code</button></p>
<p><button onclick="codeToColorBtn()">Convert code to colors</button></p>
<p>SGB Code: <input id="sgb-code" type="text" value="0501-7630-4243"></p>
<p id="share-link" style="display: none;"></p>
<h3>Source Code</h3>
<p>Did you know there are 53,654,497,280 unique palettes? If you have a custom palette you'd like to share, which may get added to a preset option, <a href="https://forms.gle/QxqJ2mY4HnjrLEej8" target="_blank">submit it here</a>.</p>
<p>Source code for this tool is available on <a href="https://github.com/slashinfty/sgb-colors">GitHub</a>.</p>
</div>
</body>
</html>