- 8,511 views, 18 today
432
Changing hardcoded colours in vanilla / without optifine
Have you ever wanted to change hardcoded colours in Minecraft such as the xp text, loading screen background, item slot hover or item tooltip colours without using a mod such as optifine? This tutorial will show you how to do all of the above by using vanilla core shaders introduced in 1.17.
Outdated:
This post was last updated for 1.19. Although some parts of it may still work, others won't because of file renames and other changes. I encourage you to look at the Shaders Wiki for some helpful resources and up-to-date information
Prerequisites
A text editor that can open and edit .fsh files. I recommend Notepad++ or Visual Studio Code.
To convert Hexadecimal colours you can use this generator.
It is also recommended to install the Shader Reload mod to allow easier reloading and debugging of the pack. (This is not required and the pack will work fine without it)
Setting up the resource pack
New tutorials! Sodium accent colour and world/resourcepack icon hover colour
Sodium Accent Colour
Changing the Worlds/Resourcepack Icon Hover Colour
The Worlds/Resourcepack Icon Hover Colour is the colour that overlays the icon for Worlds, Servers, Resource Packs and Data Packs. This colour should be around 50% transparent so it will be properly visible and won't obstruct the image behind it.
Step 1:
Open position_color.fsh with the text editor of your choice. You should see a main function like this
Just above fragColor we will add an if statement to check for the slightly transparent grey of this colour.
You can replace "vec4(0.2588, 0.5922, 0.7569, 0.4);" with any colour you like by using the generator at the top of this tutorial.
Please do some testing to make sure your colour is still visible on most images!
Step 3:
Reload the shader by either pressing F3+R (if you have the shader reload mod) or F3+T. Open either your world menu or resource pack menu and hover over a world/pack. You should see the image gets overlayed with a blue colour, in this case, or whatever colour you chose to set it as.
You can download this file here
Changing the XP Text colour
Changing the inventory slot hover colour
Changing the loading screen background colour
Changing Item Tooltip colours
Template Pack
Can't get the pack to work, or just want a template to mess around with? You can download a template pack including all the elements of this tutorial. You are free to use it in any pack you make. Credits are not necessary but are apreciated :)
Download the template here!
If you found this tutorial useful please consider leaving a diamond or sharing it! If you want to get notified of updates then give this blog a heart
Have you ever wanted to change hardcoded colours in Minecraft such as the xp text, loading screen background, item slot hover or item tooltip colours without using a mod such as optifine? This tutorial will show you how to do all of the above by using vanilla core shaders introduced in 1.17.
Outdated:
This post was last updated for 1.19. Although some parts of it may still work, others won't because of file renames and other changes. I encourage you to look at the Shaders Wiki for some helpful resources and up-to-date information
Prerequisites
A text editor that can open and edit .fsh files. I recommend Notepad++ or Visual Studio Code.
To convert Hexadecimal colours you can use this generator.
It is also recommended to install the Shader Reload mod to allow easier reloading and debugging of the pack. (This is not required and the pack will work fine without it)
Setting up the resource pack
Click to expand
This tutorial will assume you know how to make a resourcepack / know the structure of one. It will also assume you have a basic understanding of GLSL.
If you only want to change the xp text colour you can skip step 2
Step 1:
You will need to create a folder in your resourcepacks folder and call it anything you want, this will be your resourcepack. You can find the resource packs folder by opening Minecraft, clicking options then resource packs and then Open Pack Folder. Place this template pack.mcmeta file in the folder you created.
Step 2:
You will need the vanilla position_color.fsh file and place it in assets/minecraft/shaders/core in the resource pack you just created. You can find this yourself or download it here. This shader manages the loading screen background, item slot hover and item tooltips (+ more not covered in this tutorial)
Step 3:
You will need the vanilla rendertype_text.fsh shader and place it in assets/minecraft/shaders/core in the resource pack you just created. You can find this yourself or download it here. This shader manages the rendering of any text you see on-screen. This includes the chat, signs and importantly, the xp text.
You can now load the pack into your game and continue the tutorial! (It shouldn't change anything yet)
If you only want to change the xp text colour you can skip step 2
Step 1:
You will need to create a folder in your resourcepacks folder and call it anything you want, this will be your resourcepack. You can find the resource packs folder by opening Minecraft, clicking options then resource packs and then Open Pack Folder. Place this template pack.mcmeta file in the folder you created.
Step 2:
You will need the vanilla position_color.fsh file and place it in assets/minecraft/shaders/core in the resource pack you just created. You can find this yourself or download it here. This shader manages the loading screen background, item slot hover and item tooltips (+ more not covered in this tutorial)
Step 3:
You will need the vanilla rendertype_text.fsh shader and place it in assets/minecraft/shaders/core in the resource pack you just created. You can find this yourself or download it here. This shader manages the rendering of any text you see on-screen. This includes the chat, signs and importantly, the xp text.
You can now load the pack into your game and continue the tutorial! (It shouldn't change anything yet)
New tutorials! Sodium accent colour and world/resourcepack icon hover colour
Sodium Accent Colour
Click to expand
The sodium accent colour is the colour of the tab you are currently in and the colour of checkboxes in the video settings menu when you are using the Sodium mod
Step 1:
Open position_color.fsh with the text editor of your choice. You should see a main function like this
Just above fragColor we will add an if statement to check for the blue accent colour like so:
You can replace "vec4(0.3882, 0.6157, 0.3216, color.a);" with any colour you like by using the generator at the top of this tutorial.
This is optional but I replaced the last value (which is the opacity) with color.a to keep the original opacity of the colour.
Step 3:
Reload the shader by either pressing F3+R (if you have the shader reload mod) or F3+T. Open the Sodium video settings menu and you should now see your custom colour replace the old light blue one!
In this case it's green
You can download this file here
Step 1:
Open position_color.fsh with the text editor of your choice. You should see a main function like this
void main() {
vec4 color = vertexColor;
if (color.a == 0.0) {
discard;
}
fragColor = color * ColorModulator;
}Step 2:Just above fragColor we will add an if statement to check for the blue accent colour like so:
/* Sodium checkbox colour */
if(color == vec4(0.5803921568627451, 0.8941176470588236, 0.8274509803921568, 1)){
/* the line below is where your custom colour goes */
color = vec4(0.3882, 0.6157, 0.3216, color.a);
}You can replace "vec4(0.3882, 0.6157, 0.3216, color.a);" with any colour you like by using the generator at the top of this tutorial.
This is optional but I replaced the last value (which is the opacity) with color.a to keep the original opacity of the colour.
Step 3:
Reload the shader by either pressing F3+R (if you have the shader reload mod) or F3+T. Open the Sodium video settings menu and you should now see your custom colour replace the old light blue one!
In this case it's green
You can download this file here
Changing the Worlds/Resourcepack Icon Hover Colour
Click to expand
The Worlds/Resourcepack Icon Hover Colour is the colour that overlays the icon for Worlds, Servers, Resource Packs and Data Packs. This colour should be around 50% transparent so it will be properly visible and won't obstruct the image behind it.
Step 1:
Open position_color.fsh with the text editor of your choice. You should see a main function like this
void main() {
vec4 color = vertexColor;
if (color.a == 0.0) {
discard;
}
fragColor = color * ColorModulator;
}Step 2:Just above fragColor we will add an if statement to check for the slightly transparent grey of this colour.
/* server/world/resourcepack icon hover */
if (color.rgb == vec3(0.5647058823529412) && color.a >= 0.605 && color.a >= 0.606) {
color = vec4(0.2588, 0.5922, 0.7569, 0.4);
}You can replace "vec4(0.2588, 0.5922, 0.7569, 0.4);" with any colour you like by using the generator at the top of this tutorial.
Please do some testing to make sure your colour is still visible on most images!
Step 3:
Reload the shader by either pressing F3+R (if you have the shader reload mod) or F3+T. Open either your world menu or resource pack menu and hover over a world/pack. You should see the image gets overlayed with a blue colour, in this case, or whatever colour you chose to set it as.
You can download this file here
Changing the XP Text colour
Click to expand
The XP Text colour applies to a lot of things including, the XP level above the hotbar, the XP Level in the enchanting table and the enchantment cost text in the anvil.
Step 1:
Open rendertype_text.fsh with an editor of your choice. Inside you should see a main function something like this.
XP Text
Step 2:
Just above fragColor we will add an if statement to check for the XP text colour. It should look like this:
This if statement will check for the XP text colour of any text on screen and replace it with a custom colour. In this case it is a light blue colour. You can use the generator from the start of this tutorial to convert colours. You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);
XP Text Shadow
Step 3:
Just below the previous if statement we will add another if statement to check for the XP text shadow colour. It should look like this:
This if statement will check for the XP text shadow colour of any text on screen and replace it with a custom colour. In this case it is a slightly darker blue. You can use the generator from the start of this tutorial to convert colours. You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);
Not enough xp text (in enchantment table)
See this comment for the code snippets, they should be placed in the same place as the pieces of code mentioned above
Step 4:
Save the file and go back into Minecraft. If you have the shader reload mod installed hit F3+R, this will reload the shader and log errors in the chat, If not, press F3+T. If you go in survival mode or rename something in an anvil you should see the normally green text change to a blue colour (or whatever colour you set)!
You can download this file by clicking this link.
Step 1:
Open rendertype_text.fsh with an editor of your choice. Inside you should see a main function something like this.
| void main() { vec4 color = texture(Sampler0, texCoord0) * vertexColor * ColorModulator; if (color.a < 0.1) { discard; } fragColor = linear_fog(color, vertexDistance, FogStart, FogEnd, FogColor); } |
XP Text
Step 2:
Just above fragColor we will add an if statement to check for the XP text colour. It should look like this:
| /* xp text*/ if(color.r <= 126.50/255.0 && color.r > 126.49/255.0 && color.g == 252/255.0 && color.b <= 31.63/255.0 && color.b > 31.62/255.0){ color = vec4(0.2941, 0.6824, 1.0, color.a); } |
This if statement will check for the XP text colour of any text on screen and replace it with a custom colour. In this case it is a light blue colour. You can use the generator from the start of this tutorial to convert colours. You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);
XP Text Shadow
Step 3:
Just below the previous if statement we will add another if statement to check for the XP text shadow colour. It should look like this:
| /* xp text shadow */ if(color.r <= 31.7/255.0 && color.r > 31.6/255.0 && color.g <= 62.3/255.0 && color.g > 62.25/255.0 && color.b <= 8.0/255.0 && color.b > 7.9/255.0){ color = vec4(0.1569, 0.3686, 0.5412, color.a); /* < < Your custom colour goes here */ } |
This if statement will check for the XP text shadow colour of any text on screen and replace it with a custom colour. In this case it is a slightly darker blue. You can use the generator from the start of this tutorial to convert colours. You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);
Not enough xp text (in enchantment table)
See this comment for the code snippets, they should be placed in the same place as the pieces of code mentioned above
Step 4:
Save the file and go back into Minecraft. If you have the shader reload mod installed hit F3+R, this will reload the shader and log errors in the chat, If not, press F3+T. If you go in survival mode or rename something in an anvil you should see the normally green text change to a blue colour (or whatever colour you set)!
You can download this file by clicking this link.
Changing the inventory slot hover colour
Click to expand
The inventory slot hover colour is the white background that appears when hovering a slot in an inventory.
To change this we will edit the position_color.fsh shader
Step 1:
Open position_color.fsh with an editor of your choice. Inside you should see a main function something like this
Step 2:
Just above fragColour we will add an if statement to check for the slot hover colour and replace it with our own colour. It should look like this:
This if statement checks for a white colour with the opacity of 0.5 (the slot hover colour) and replaces it with a colour of your choice, in this case its #4e315e. You can use the generator from the start of this tutorial to convert colours.
You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);
Step 3:
Save the file and go back into Minecraft. If you have the shader reload mod installed hit F3+R, this will reload the shader and log errors in the chat, If not, press F3+T. If you did it right your slot hover should now be purple (or whatever colour you picked)!
You can download this file by clicking this link
To change this we will edit the position_color.fsh shader
Step 1:
Open position_color.fsh with an editor of your choice. Inside you should see a main function something like this
| void main() { vec4 color = vertexColor; if (color.a == 0.0) { discard; } fragColor = color * ColorModulator; } |
Step 2:
Just above fragColour we will add an if statement to check for the slot hover colour and replace it with our own colour. It should look like this:
| if (color.r == 255/255.0 && color.g == 255/255.0 && color.b == 255/255.0 && color.a == 128/255.0) { color = vec4(0.30588, 0.19216, 0.36, color.a); /* < < Your colour goes here (#4e315e)*/ } |
This if statement checks for a white colour with the opacity of 0.5 (the slot hover colour) and replaces it with a colour of your choice, in this case its #4e315e. You can use the generator from the start of this tutorial to convert colours.
You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);
Step 3:
Save the file and go back into Minecraft. If you have the shader reload mod installed hit F3+R, this will reload the shader and log errors in the chat, If not, press F3+T. If you did it right your slot hover should now be purple (or whatever colour you picked)!
You can download this file by clicking this link
Changing the loading screen background colour
Click to expand
This section will only work when "Monochrome Logo" is turned off in the settings as it replaces the red colour.
Step 1:
Open position_color.fsh with an editor of your choice. Inside you should see a main function something like this.
Step 2:
Just above fragColor (or underneath your if statement if you followed the previous step) we will add an if statement to check for the red colour of the loading screen. It should look something like this
This if statement will check for the red colour of the loading screen and replace it with a custom colour. In this case it's #372C32. You can use the generator from the start of this tutorial to convert colours.
You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);
Step 3:
Save the file and go back into Minecraft. If you have the shader reload mod installed hit F3+R, this will reload the shader and log errors in the chat, If not, press F3+T. Your loading screen should now be a custom colour when you press F3+T!
This method has a small problem where it doesn't show your custom colour when you first start the game. It shows just find after that though.
You can download this file by clicking this link
Step 1:
Open position_color.fsh with an editor of your choice. Inside you should see a main function something like this.
| void main() { vec4 color = vertexColor; if (color.a == 0.0) { discard; } fragColor = color * ColorModulator; } |
Step 2:
Just above fragColor (or underneath your if statement if you followed the previous step) we will add an if statement to check for the red colour of the loading screen. It should look something like this
| if (color.r == 239.0/255.0 && color.g == 50.0/255.0 && color.b == 61.0/255.0) { color = vec4(0.2157, 0.1725, 0.1961, color.a); /* < < Your custom colour goes here (#372C32)*/ } |
You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);
Step 3:
Save the file and go back into Minecraft. If you have the shader reload mod installed hit F3+R, this will reload the shader and log errors in the chat, If not, press F3+T. Your loading screen should now be a custom colour when you press F3+T!
This method has a small problem where it doesn't show your custom colour when you first start the game. It shows just find after that though.
You can download this file by clicking this link
Changing Item Tooltip colours
Click to expand
Item tooltips are the text that appears when hovering over an item. This section will show you how to change the colours of it.
Step 1:
Open position_color.fsh with an editor of your choice. Inside you should see a main function something like this.
Background Colour
Step 2:
Just above fragColor (or underneath your if statement if you followed the previous steps) we will add an if statement to check for the background colour of the tooltip. It should look like this:
This if statement will check for the background colour of the tooltip and replace it with a custom colour. In this case it is a purple colour. You can use the generator from the start of this tutorial to convert colours. You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);. In this example I have replaced "color.a" with 0.45 to make the tooltip slightly more transparent.
Border Colours
Step 3:
Below your previous if statement we will add another to check for the colours of the tooltip border. This one is slightly more complex as there are a range of colours to replace this time instead of just 1. Your if statement should look like this:
This if statement will check for the border colours of the tooltip and replace it with a custom colour. In this case it is a very dark purple. You can use the generator from the start of this tutorial to convert colours. In this example I have replaced "color.a" with 1 to make the border fully opaque.
Step 4:
Save the file and go back into Minecraft. If you have the shader reload mod installed hit F3+R, this will reload the shader and log errors in the chat, If not, press F3+T. When you hover over an item you should see that the tooltip is a purple colour!
You can download this file by clicking this link.
Step 1:
Open position_color.fsh with an editor of your choice. Inside you should see a main function something like this.
| void main() { vec4 color = vertexColor; if (color.a == 0.0) { discard; } fragColor = color * ColorModulator; } |
Background Colour
Step 2:
Just above fragColor (or underneath your if statement if you followed the previous steps) we will add an if statement to check for the background colour of the tooltip. It should look like this:
| /* checks for background colour */ if (color.r == 16/255.0 && color.g == 0/255.0 && color.b == 16/255.0 ) { color = vec4(0.2275, 0.1373, 0.2745, 0.45); /* < < Your custom colour goes here*/ } |
This if statement will check for the background colour of the tooltip and replace it with a custom colour. In this case it is a purple colour. You can use the generator from the start of this tutorial to convert colours. You can replace the last number from the generator to "color.a" to use the default value. example: vec4(0.5569, 0.8157, 0.8078, 0.7); to vec4(0.5569, 0.8157, 0.8078, color.a);. In this example I have replaced "color.a" with 0.45 to make the tooltip slightly more transparent.
Border Colours
Step 3:
Below your previous if statement we will add another to check for the colours of the tooltip border. This one is slightly more complex as there are a range of colours to replace this time instead of just 1. Your if statement should look like this:
| /* checks for border colours */ if (color.r >= 0.15686 && color.r <= 0.31373 && color.g == 0 && color.b >= 0.49 && color.b <= 1) { color = vec4(0.1569, 0.102, 0.1804, 1); /* < < Your custom colour goes here*/ } |
This if statement will check for the border colours of the tooltip and replace it with a custom colour. In this case it is a very dark purple. You can use the generator from the start of this tutorial to convert colours. In this example I have replaced "color.a" with 1 to make the border fully opaque.
Step 4:
Save the file and go back into Minecraft. If you have the shader reload mod installed hit F3+R, this will reload the shader and log errors in the chat, If not, press F3+T. When you hover over an item you should see that the tooltip is a purple colour!
You can download this file by clicking this link.
Template Pack
Can't get the pack to work, or just want a template to mess around with? You can download a template pack including all the elements of this tutorial. You are free to use it in any pack you make. Credits are not necessary but are apreciated :)
Download the template here!
If you found this tutorial useful please consider leaving a diamond or sharing it! If you want to get notified of updates then give this blog a heart
| Tags |
3 Update Logs
Update #3 : by Enchanted_Games 07/09/2022 2:40:21 pmJul 9th, 2022
Added sodium menu accent colour and world icon hover colour
LOAD MORE LOGS
tools/tracking
5465850
6
changing-hardcoded-colours-1-18-1-17-core-shaders
glitched_assasin
Papa Enny
Apro87
Planetmax2
TheMountaineer
Copterman2596
BLACKMAGE_NEW_GHOSTE
PsioPsia001
Create an account or sign in to comment.
/* not enough xp text */
if( all(lessThan(abs(color.rgb-vec3(0.251, 0.498, 0.0627)),vec4(0.0001))) ) {
color = vec4(0.251, 0.498, 0.0627, 1.); /* < < Your custom colour goes here */
}
/* not enough xp text shadow */
if( all(lessThan(abs(color.rgb-vec3(0.0627, 0.1216, 0.0157)),vec4(0.0001))) ) {
color = vec4(0.0627, 0.1216, 0.0157, 1.); /* < < Your custom colour goes here */
}
You can ping me on discord: Sir_Crazynut
The game output log should show a reason for the crash if it’s crashing
I am using 1.20.2
#moj_import <fog.glsl>#moj_import <purple_border_gui/util_functions.glsl>
in vec3 Position;in vec4 Color;in vec2 UV0;in ivec2 UV2;
uniform sampler2D Sampler2;
uniform mat4 ModelViewMat;uniform mat4 ProjMat;uniform mat3 IViewRotMat;uniform int FogShape;
out float vertexDistance;out vec4 vertexColor;out vec2 texCoord0;
bool inGUI() { // max vertex distance for text to be classed as in a gui float maxVertDistance = 800;
if(fog_distance(ModelViewMat, IViewRotMat * Position, FogShape) >= maxVertDistance){ return true; } else{ return false; }}
void main() { vec3 pos = Position; vec4 col = Color;
// inventory text if( roughlyEquals( col.rgb, vec3(0.25098, 0.25098, 0.25098) ) ) { col.rgb = vec3(0, 0.6862745098039216, 0.6509803921568628); } // enchanting table button text else if( roughlyEquals( Color.rgb, vec3(0, 0.6862745098039216, 0.6509803921568628) ) && inGUI()){ pos.y += 2; } // enchanting table button diabled text else if( roughlyEquals( Color.rgb, vec3(0, 0.196078431372549, 0.1882352941176471) ) && inGUI()){ pos.y += 2; } // enchanting table button hover text else if( roughlyEquals( Color.rgb, vec3(0, 0.1490196078431373, 0.6980392156862745) ) && inGUI()){ pos.y += 1; }
gl_Position = ProjMat * ModelViewMat * vec4(pos, 1.0); vertexDistance = fog_distance(ModelViewMat, IViewRotMat * Position, FogShape); vertexColor = col * texelFetch(Sampler2, UV2 / 16, 0); vertexColor = col; texCoord0 = UV0;}
#moj_import <fog.glsl>
uniform sampler2D Sampler0;
uniform vec4 ColorModulator;uniform float FogStart;uniform float FogEnd;uniform vec4 FogColor;
in float vertexDistance;in vec4 vertexColor;in vec2 texCoord0;in vec3 xyzPos;
out vec4 fragColor;
vec4 color = texture(Sampler0, texCoord0) * vertexColor * ColorModulator;
void main() { if (color.a < 0.1) { discard; }
/* xp text*/ if(color.r <= 126.50/255.0 && color.r > 126.49/255.0 && color.g == 252/255.0 && color.b <= 31.63/255.0 && color.b > 31.62/255.0){ color = vec4(0, 0.6862745098, 0.6509803922, 1); /* < < Your custom colour goes here */ } /* xp text shadow */ if(color.r <= 31.7/255.0 && color.r > 31.6/255.0 && color.g <= 62.3/255.0 && color.g > 62.25/255.0 && color.b <= 8.0/255.0 && color.b > 7.9/255.0){ color = vec4(0, 0.1961, 0.1882, color.a); /* < < Your custom colour goes here */ }
fragColor = linear_fog(color, vertexDistance, FogStart, FogEnd, FogColor);}
// Experience text
if( roughlyEquals( col.rgb, vec3(0.5019607843137255, 1, 0.12549019607843137) ) && inGUI()){
col.rgb = vec3(0.50196, 1, 0.12549); // <- custom colour
}
// Experience text shadowelse if( roughlyEquals( col.rgb, vec3(0.12549019607843137, 0.24705882352941178, 0.03137254901960784) ) && isShadow() && inGUI() ){
col.rgb = vec3(0.12549, 0.24706, 0.03137); // <- custom colour
}
Sorry for the late reply btw, didn't get the chance to respond until now
I have deleted some of the code from your resourcepack that I did not need. And I cannot find the function in the files from your pack.