diff --git a/api/comments.js b/api/comments.js
index e38498d..e9bc42e 100644
--- a/api/comments.js
+++ b/api/comments.js
@@ -1,3 +1,5 @@
+const colors = require('../misc/icons/colors.json');
+
 module.exports = async (app, req, res) => {
 
     if (req.offline) return res.sendError()
@@ -64,7 +66,9 @@ module.exports = async (app, req, res) => {
             icon: +y[9] || 1,
             col1: +y[10],
             col2: +y[11],
-            glow: +y[15] > 1
+            glow: +y[15] > 1,
+            col1RGB: colors[y[10]] || colors["0"],
+            col2RGB: colors[y[11]] || colors["3"]
           }
           app.userCache(req.id, comment.accountID, comment.playerID, comment.username)
         }
diff --git a/api/leaderboards/leaderboardLevel.js b/api/leaderboards/leaderboardLevel.js
index 71e816f..39f7915 100644
--- a/api/leaderboards/leaderboardLevel.js
+++ b/api/leaderboards/leaderboardLevel.js
@@ -1,3 +1,5 @@
+const colors = require('../../misc/icons/colors.json');
+
 module.exports = async (app, req, res) => {
 
   if (req.offline) return res.sendError()
@@ -37,7 +39,9 @@ module.exports = async (app, req, res) => {
           icon: +x[9],
           col1: +x[10],
           col2: +x[11],
-          glow: +x[15] > 1
+          glow: +x[15] > 1,
+          col1RGB: colors[x[10]] || colors["0"],
+          col2RGB: colors[x[11]] || colors["3"]
         }
         keys.forEach(k => delete x[k])
         app.userCache(req.id, x.accountID, x.playerID, x.username)
diff --git a/api/leaderboards/scores.js b/api/leaderboards/scores.js
index 730d461..15dcab3 100644
--- a/api/leaderboards/scores.js
+++ b/api/leaderboards/scores.js
@@ -1,3 +1,5 @@
+const colors = require('../../misc/icons/colors.json');
+
 module.exports = async (app, req, res) => {
 
    if (req.offline) return res.sendError()
@@ -37,7 +39,9 @@ module.exports = async (app, req, res) => {
           icon: +x[9] || 1,
           col1: +x[10],
           col2: +x[11],
-          glow: +x[15] > 1
+          glow: +x[15] > 1,
+          col1RGB: colors[x[10]] || colors["0"],
+          col2RGB: colors[x[11]] || colors["3"]
         }
         keys.forEach(k => delete x[k])
         app.userCache(req.id, x.accountID, x.playerID, x.username)
diff --git a/api/profile.js b/api/profile.js
index 142011d..0ad1fe1 100644
--- a/api/profile.js
+++ b/api/profile.js
@@ -1,4 +1,5 @@
 const fs = require('fs')
+const colors = require('../misc/icons/colors.json');
 
 module.exports = async (app, req, res, api, getLevels) => {
 
@@ -76,6 +77,8 @@ module.exports = async (app, req, res, api, getLevels) => {
           col2: +account[11],
           deathEffect: +account[48] || 1,
           glow: account[28] == "1",
+          col1RGB: colors[account[10]] || colors["0"],
+          col2RGB: colors[account[11]] || colors["3"]
       }
   
       if (api) return res.status(200).send(userData)
diff --git a/html/api.html b/html/api.html
index 79a6213..1f7ad44 100644
--- a/html/api.html
+++ b/html/api.html
@@ -107,14 +107,14 @@
 			<p>Using "daily" or "weekly" as the level ID will return the current daily/weekly level (always downloaded)</p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-level').slideToggle(100);"><b>Parameters (1)</b></p>
+			<p class="reveal" onclick="revealSection('#params-level');"><b>Parameters (1)</b></p>
 			<div class="subdiv" id="params-level">
 				<p>download: Whether or not to actually download the level (much slower)</p>
 				<p>*By default it performs a search for the level ID and returns as much information as possible without downloading</p>
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-level').slideToggle(100);"><b>Response (47)</b></p>
+			<p class="reveal" onclick="revealSection('#response-level');"><b>Response (47)</b></p>
 			<div class="subdiv" id="response-level">
 				<p class="br">*Values that require a download are in <span style="color:red">red</span> and values that only work with daily/weekly levels are <span style="color:#00abee">blue</span></p>
 				<p>name: The name of the level</p>
@@ -167,7 +167,7 @@
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#request-level').slideToggle(100)"><b>Example</b></p>
+			<p class="reveal" onclick="revealSection('#request-level')"><b>Example</b></p>
 			<div class="subdiv" id="request-level">
 				<p><b>Example Request</b></p>
 				<p>/api/level/4284013 </p>
@@ -175,7 +175,7 @@
 
 				<br>
 				<p><b>Example Response</b></p>
-				<pre><p class="fetch" link="/api/level/4284013">...</p></pre>
+				<pre><p class="fetch" link="/api/level/4284013">Loading...</p></pre>
 			</div>
 			<br>
 		</div>
@@ -194,13 +194,13 @@
 			<p>Unlike the Geometry Dash API, both username and ID can be used to fetch a user profile.</p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-profile').slideToggle(100)"><b>Parameters (1)</b></p>
+			<p class="reveal" onclick="revealSection('#params-profile')"><b>Parameters (1)</b></p>
 			<div class="subdiv" id="params-profile">
 				<p>player: Forces the player ID to be used for fetching (normally Account ID is tried first)</p>
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-profile').slideToggle(100)"><b>Response (28)</b></p>
+			<p class="reveal" onclick="revealSection('#response-profile')"><b>Response (30)</b></p>
 			<div class="subdiv" id="response-profile">
 				<p>username: The name of the player</p>
 				<p>playerID: The unique ID for all accounts</p>
@@ -221,10 +221,11 @@
 				<p>twitch: The URL of the player's Twitch account, if linked. Plug it into https://twitch.tv/{twitch}</p>
 				<p>glow: If the player's icon has a glow or not</p>
 				<p>icon, ship, ball, ufo, wave, robot, spider, col1, col2, deathEffect: The number of the icon/color used for each form. The actual icon can be generated through <a href="#icons">/icon</a></p>
+				<p>col1RGB, col2RGB: The RGB color values for each player color</p>
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#request-profile').slideToggle(100)"><b>Example</b></p>
+			<p class="reveal" onclick="revealSection('#request-profile')"><b>Example</b></p>
 			<div class="subdiv" id="request-profile">
 				<p><b>Example Request</b></p>
 				<p>/api/profile/robtop</p>
@@ -232,7 +233,7 @@
 
 				<br>
 				<p><b>Example Response</b></p>
-				<pre><p class="fetch" link="/api/profile/robtop">...</p></pre>
+				<pre><p class="fetch" link="/api/profile/robtop">Loading...</p></pre>
 			</div>
 			<br>
 		</div>
@@ -251,7 +252,7 @@
 			<p>Use an asterisk (*) as your search query if you do not wish to search by level name (if you intend on using filters)</p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-search').slideToggle(100)"><b>Parameters (19)</b></p>
+			<p class="reveal" onclick="revealSection('#params-search')"><b>Parameters (19)</b></p>
 			<div class="subdiv" id="params-search">
 				<p>Buckle up... there's a lot</p>
 
@@ -299,13 +300,13 @@
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-search').slideToggle(100)"><b>Response*</b></p>
+			<p class="reveal" onclick="revealSection('#response-search')"><b>Response*</b></p>
 			<div class="subdiv" id="response-search">
 				<p>The response for searching is an array of up to 10 <a href="#level">level objects</a></p>
 				<p>If the page is set to 0, the first level object will also display the number of pages and search results.<br>Since RobTop is a ploopy this only works on the first page, and may sometimes just display 9999 results.</p>
 			</div>
 			<br>
-			<p class="reveal" onclick="$('#request-search').slideToggle(100)"><b>Examples</b></p>
+			<p class="reveal" onclick="revealSection('#request-search')"><b>Examples</b></p>
 			<div class="subdiv" id="request-search">
 				<p><b>Example Requests</b></p>
 				<p>/api/search/abc (Searches for a level named "abc")</p>
@@ -318,7 +319,7 @@
 				<br>
 				<p><b>Example Response</b></p>
 				<p>(first example used)</p>
-				<pre><p class="fetch" link="/api/search/abc?count=3">...</p></pre>
+				<pre><p class="fetch" link="/api/search/abc?count=3">Loading...</p></pre>
 			</div>
 		</div>
 		<div class="seperator"></div>
@@ -334,7 +335,7 @@
 			<p>Returns the top player, creator, and accurate leaderboards</p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-leaderboard').slideToggle(100)"><b>Parameters (6)</b></p>
+			<p class="reveal" onclick="revealSection('#params-leaderboard')"><b>Parameters (6)</b></p>
 			<div class="subdiv" id="params-leaderboard">
 				<p class="br">*Values that only work with the accurate leaderboard are in <span style="color:red">red</span></p>
 				<p>count: The amount of players to list (default is 100, max is 5000, does not work with accurate leaderboard)</p>
@@ -346,7 +347,7 @@
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-leaderboard').slideToggle(100)"><b>Response (10)</b></p>
+			<p class="reveal" onclick="revealSection('#response-leaderboard')"><b>Response (10)</b></p>
 			<div class="subdiv" id="response-leaderboard">
 				<p>The API will return an array of each player with the following information:</p>
 				<p>rank: Position on the leaderboard</p>
@@ -362,7 +363,7 @@
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#request-leaderboard').slideToggle(100)"><b>Examples</b></p>
+			<p class="reveal" onclick="revealSection('#request-leaderboard')"><b>Examples</b></p>
 			<div class="subdiv" id="request-leaderboard">
 				<p><b>Example Requests</b></p>
 				<p>/api/leaderboard?count=10 (Fetches the top 10 players)</p>
@@ -372,7 +373,7 @@
 				<br>
 				<p><b>Example Response</b></p>
 				<p>(first example used)</p>
-				<pre><p class="fetch" link="/api/leaderboard?count=10">...</p></pre>
+				<pre><p class="fetch" link="/api/leaderboard?count=10">Loading...</p></pre>
 			</div>
 
 			<br>
@@ -392,13 +393,13 @@
 			<p style="font-size: 14px">I'm putting this in the same section because they're basically the same lol</p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-mappacks').slideToggle(100)"><b>Parameters (0)</b></p>
+			<p class="reveal" onclick="revealSection('#params-mappacks')"><b>Parameters (0)</b></p>
 			<div class="subdiv" id="params-mappacks">
 				<p>No parameters for this one!</p>
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-mappacks').slideToggle(100)"><b>Response (8)</b></p>
+			<p class="reveal" onclick="revealSection('#response-mappacks')"><b>Response (8)</b></p>
 			<div class="subdiv" id="response-mappacks">
 				<p class="br">*Values in <span style="color:#00abee">blue</span> are used in gauntlets, everything else is exclusive to map packs</p>
 				<p class="blue">id: The ID of the map pack, or index/type of the gauntlet</p>
@@ -412,14 +413,14 @@
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#request-mappacks').slideToggle(100)"><b>Example</b></p>
+			<p class="reveal" onclick="revealSection('#request-mappacks')"><b>Example</b></p>
 			<div class="subdiv" id="request-mappacks">
 				<p><b>Example Request</b></p>
 				<p>/api/mappacks</p>
 
 				<br>
 				<p><b>Example Response</b></p>
-				<pre><p class="fetch" link="/api/mappacks">...</p></pre>
+				<pre><p class="fetch" link="/api/mappacks">Loading...</p></pre>
 			</div>
 
 			<br>
@@ -438,14 +439,14 @@
 			<p>Returns the leaderboard for a level</p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-levelleaderboard').slideToggle(100)"><b>Parameters (2)</b></p>
+			<p class="reveal" onclick="revealSection('#params-levelleaderboard')"><b>Parameters (2)</b></p>
 			<div class="subdiv" id="params-levelleaderboard">
 				<p>count: The amount of players to list (default is 100, max is 200)</p>
 				<p>week: Whether or not to fetch the weekly leaderboard instead of the regular one</p>
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-levelleaderboard').slideToggle(100)"><b>Response (7)</b></p>
+			<p class="reveal" onclick="revealSection('#response-levelleaderboard')"><b>Response (7)</b></p>
 			<div class="subdiv" id="response-levelleaderboard">
 				<p>The API will return an array of each player with the following information:</p>
 				<p>rank: Position on the leaderboard</p>
@@ -459,14 +460,14 @@
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#request-levelleaderboard').slideToggle(100)"><b>Example</b></p>
+			<p class="reveal" onclick="revealSection('#request-levelleaderboard')"><b>Example</b></p>
 			<div class="subdiv" id="request-levelleaderboard">
 				<p><b>Example Request</b></p>
 				<p>/api/leaderboardLevel/1063115 (Fetches the leaderboard for Dynamic on Track)</p>
 
 				<br>
 				<p><b>Example Response</b></p>
-				<pre><p class="fetch" link="/api/leaderboardLevel/1063115?count=10">...</p></pre>
+				<pre><p class="fetch" link="/api/leaderboardLevel/1063115?count=10">Loading...</p></pre>
 			</div>
 
 			<br>
@@ -484,7 +485,7 @@
 			<p>Returns up to 10 comments or profile posts</p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-comment').slideToggle(100)"><b>Parameters (4)</b></p>
+			<p class="reveal" onclick="revealSection('#params-comment')"><b>Parameters (4)</b></p>
 			<div class="subdiv" id="params-comment">
 				<p>page: The page of the search</p>
 				<p>top: Whether or not to sort by most liked (comments only)</p>
@@ -495,7 +496,7 @@
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-comment').slideToggle(100)"><b>Response (16)</b></p>
+			<p class="reveal" onclick="revealSection('#response-comment')"><b>Response (16)</b></p>
 			<div class="subdiv" id="response-comment">
 				<p>The API will return an array of each comment with the following information.<br>Values that don't work for profile posts are in <span style="color:red">red</span></p>
 				<p>content: The comment text</p>
@@ -517,7 +518,7 @@
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#request-comment').slideToggle(100)"><b>Examples</b></p>
+			<p class="reveal" onclick="revealSection('#request-comment')"><b>Examples</b></p>
 			<div class="subdiv" id="request-comment">
 				<p><b>Example Requests</b></p>
 				<p>/api/comments/26681070?top (Fetches Sonic Wave's most liked comments)</p>
@@ -527,7 +528,7 @@
 				<br>
 				<p><b>Example Response</b></p>
 				<p>(first example used)</p>
-				<pre><p class="fetch" link="/api/comments/26681070?top">...</p></pre>
+				<pre><p class="fetch" link="/api/comments/26681070?top">Loading...</p></pre>
 			</div>
 
 		</div>
@@ -544,7 +545,7 @@
 				<p>*Commenting has a rate limit of 15 seconds</p>
 	
 				<br>
-				<p class="reveal" onclick="$('#params-commenting').slideToggle(100)"><b>Parameters (6)</b></p>
+				<p class="reveal" onclick="revealSection('#params-commenting')"><b>Parameters (6)</b></p>
 				<div class="subdiv" id="params-commenting">
 					<p>comment: The content of the comment</p>
 					<p>username: Your username</p>
@@ -557,7 +558,7 @@
 	
 				<br>
 
-				<p class="reveal" onclick="$('#request-commenting').slideToggle(100)"><b>Example</b></p>
+				<p class="reveal" onclick="revealSection('#request-commenting')"><b>Example</b></p>
 				<div class="subdiv" id="request-commenting">
 					<p><b>Example Request</b></p>
 					<p>POST /postComment<br>
@@ -584,7 +585,7 @@
 				<p>Leaves a profile post. This one is a POST request!</p>
 	
 				<br>
-				<p class="reveal" onclick="$('#params-profileposting').slideToggle(100)"><b>Parameters (5)</b></p>
+				<p class="reveal" onclick="revealSection('#params-profileposting')"><b>Parameters (5)</b></p>
 				<div class="subdiv" id="params-profileposting">
 					<p>comment: The content of the profile post</p>
 					<p>username: Your username</p>
@@ -595,7 +596,7 @@
 	
 				<br>
 
-				<p class="reveal" onclick="$('#request-profileposting').slideToggle(100)"><b>Example</b></p>
+				<p class="reveal" onclick="revealSection('#request-profileposting')"><b>Example</b></p>
 				<div class="subdiv" id="request-profileposting">
 					<p><b>Example Requests</b></p>
 					<p>POST /postProfileComment<br>
@@ -621,7 +622,7 @@
 				<p>Likes/dislikes level, comment, or post. This one is a POST request!</p>
 	
 				<br>
-				<p class="reveal" onclick="$('#params-liking').slideToggle(100)"><b>Parameters (6)</b></p>
+				<p class="reveal" onclick="revealSection('#params-liking')"><b>Parameters (6)</b></p>
 				<div class="subdiv" id="params-liking">
 					<p>ID: The ID of the item to like. This should be a level ID, comment ID, or profile post ID</p>
 					<p>like: Whether to like or dislike the level. 1=like, 0=dislike</p>
@@ -633,7 +634,7 @@
 	
 				<br>
 
-				<p class="reveal" onclick="$('#request-liking').slideToggle(100)"><b>Example</b></p>
+				<p class="reveal" onclick="revealSection('#request-liking')"><b>Example</b></p>
 				<div class="subdiv" id="request-liking">
 					<p><b>Example Request</b></p>
 					<p>Drop a like on RobTop's popular "can you handle the kappa" comment:</p>
@@ -666,7 +667,7 @@
 				<p>I decided to put all 4 of these requests in one section because they're fairly similar ¯\_(ツ)_/¯</p>
 	
 				<br>
-				<p class="reveal" onclick="$('#params-msg').slideToggle(100)"><b>Parameters</b></p>
+				<p class="reveal" onclick="revealSection('#params-msg')"><b>Parameters</b></p>
 				<div class="subdiv" id="params-msg">
 					<p><b>All:</b></p>
 					<p>accountID: Your account ID</p>
@@ -689,7 +690,7 @@
 	
 				<br>
 
-				<p class="reveal" onclick="$('#request-msg').slideToggle(100)"><b>Example</b></p>
+				<p class="reveal" onclick="revealSection('#request-msg')"><b>Example</b></p>
 				<div class="subdiv" id="request-msg">
 					<p><b>Example Request</b></p>
 					<p>Fetch your messages:</p>
@@ -739,18 +740,18 @@
 			<br>If the song was published after March 2017, the artist must also be whitelisted by a GD moderator.</p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-artist').slideToggle(100)"><b>Parameters (0)</b></p>
+			<p class="reveal" onclick="revealSection('#params-artist')"><b>Parameters (0)</b></p>
 			<div class="subdiv" id="params-artist">
 				<p>No parameters for this one!</p>
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-artist').slideToggle(100)"><b>Response (1)</b></p>
+			<p class="reveal" onclick="revealSection('#response-artist')"><b>Response (1)</b></p>
 			<div class="subdiv" id="response-artist">
 				<p>literally just returns true or false (or -1 if there's an error)</p>
 				<p>there used to be more but rob disabled his song api sooo</p>
 			</div>
-			<!-- <p class="reveal" onclick="$('#response-artist').slideToggle(100)"><b>Response (8)</b></p>
+			<!-- <p class="reveal" onclick="revealSection('#response-artist')"><b>Response (8)</b></p>
 			<div class="subdiv" id="response-analyze">
 				<p>error: Appears if the GD servers rejected the request or not. <code>song.allowed</code> may still work even with an error</p>
 				<p>exists: If the provided song exists on Newgrounds</p>
@@ -779,13 +780,13 @@
 			<p><sb>Level analysis is updated a lot so there may be changes in the future</sb></p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-analyze').slideToggle(100)"><b>Parameters (0)</b></p>
+			<p class="reveal" onclick="revealSection('#params-analyze')"><b>Parameters (0)</b></p>
 			<div class="subdiv" id="params-analyze">
 				<p>No parameters for this one!</p>
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-analyze').slideToggle(100)"><b>Response (12)</b></p>
+			<p class="reveal" onclick="revealSection('#response-analyze')"><b>Response (12)</b></p>
 			<div class="subdiv" id="response-analyze">
 				<p><b>Response is subject to change in the future</b></p>
 				<p>The API will return the following information about the level:</p>
@@ -820,7 +821,7 @@
 			<p style="font-size:15px; margin-top:-7px">This one isn't really part of the API, but dammit, my website my rules</p>
 
 			<br>
-			<p class="reveal" onclick="$('#params-icons').slideToggle(100)"><b>Parameters (11)</b></p>
+			<p class="reveal" onclick="revealSection('#params-icons')"><b>Parameters (11)</b></p>
 			<div class="subdiv" id="params-icons">
 				<p><b>Parameters can be used to modify parts of a fetched user's icon</b></p>
 				<p>IDs generally correspond to their order of appearance in GD</p>
@@ -839,12 +840,12 @@
 			</div>
 
 			<br>
-			<p class="reveal" onclick="$('#response-icons').slideToggle(100)"><b>Response (1)</b></p>
+			<p class="reveal" onclick="revealSection('#response-icons')"><b>Response (1)</b></p>
 			<div class="subdiv" id="response-icons">
 				<p>A lovely PNG of the icon you fetched!</p>
 			</div>
 			<br>
-			<p class="reveal" onclick="$('#request-icons').slideToggle(100)"><b>Examples</b></p>
+			<p class="reveal" onclick="revealSection('#request-icons')"><b>Examples</b></p>
 			<div class="subdiv" id="request-icons">
 				<p><b>Sample Icons</b></p>
 				<p><a target="_blank" style="font-weight:400" href="../icon/colon">/icon/colon</a> (Colon's beautiful icon)</p>
@@ -873,12 +874,7 @@
 	$('.subdiv').each(function() {
 		$(this).html($(this).html().replace(/(<p.*>)(.*:) /g, '$1<span class="param">$2</span> '))
 	})
-	$('.fetch').each(function() {
-		fetch(`..${$(this).attr('link')}`).then(res => res.json()).then(res => {
-			$(this).html(JSON.stringify(res, null, 2))
-		})
-	});
-	//smooth scrolling through anchors
+	// smooth scrolling through anchors
 	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 		anchor.addEventListener('click', function(e) {
 			e.preventDefault();
@@ -888,7 +884,7 @@
 		});
 	});
 	
-	//menu button
+	// menu button
 	document.getElementById('menu-btn').onclick = function(){
 		document.getElementsByClassName('header-links')[0].classList.toggle('hid');
 		document.getElementById('menu-btn').classList.toggle('active');
@@ -900,4 +896,17 @@
 			document.getElementById('menu-btn').classList.toggle('active');
 		}
 	}
+
+	// revealing
+	function revealSection(element) {
+		let el = $(element)
+		el.slideToggle(100)
+		let foundFetch = el.find('.fetch:not(.fetched)')
+		if (foundFetch.length) {
+			foundFetch.addClass('fetched')
+			fetch(`..${foundFetch.attr('link')}`).then(res => res.json()).then(res => {
+				foundFetch.html(JSON.stringify(res, null, 2))
+			})
+		}
+	}
 </script>