TextColor3

Value Type: Color3

Description:

This property determines the color of all the text rendered by a TextButton|GUI element. This property along with TextButton/Font, TextButton/TextSize and TextButton/TextTransparency will determine the visual properties of text. Text is rendered after the text stroke (TextButton/TextStrokeColor3).

It’s important that text is easily read by players! Be sure to choose colors with little-to-no saturation, like white, grey, or black. Make sure the color of your text is contrasted by the TextButton/BackgroundColor3 of the UI element. If the element has a transparent background, try applying a black TextButton/TextStrokeColor3 to help contrast the text with the 3D world behind it.

Code Samples

Vowel Detector

This code sample, when placed within a TextBox, will turn the text color red if the typed string contains no vowels (A, E, I, O or U).

			
				Vowel Detector

				Expected Output
			
				Expand
				
			local textBox = script.Parent

local function hasVowels(str)
	return str:lower():find("[aeiou]")
end

local function onTextChanged()
	local text = textBox.Text
	-- Check for vowels
	if hasVowels(text) then
		textBox.TextColor3 = Color3.new(0, 0, 0) -- Black
	else
		textBox.TextColor3 = Color3.new(1, 0, 0) -- Red
	end
end
textBox:GetPropertyChangedSignal("Text"):Connect(onTextChanged)
		
				Copy Code
			
				Light Theme

TextBox Secret Word

This code sample creates a password-like interface for a TextBox, giving visual feedback on the player’s input.

			
				TextBox Secret Word

				Expected Output
			
				Expand
				
			-- Place this code in a LocalScript inside a TextBox
local textBox = script.Parent

local secretWord = "roblox"
local colorNormal = Color3.new(1, 1, 1) -- white
local colorWrong = Color3.new(1, 0, 0) -- red
local colorCorrect = Color3.new(0, 1, 0) -- green

-- Initialize the state of the textBox
textBox.ClearTextOnFocus = true
textBox.Text = ""
textBox.Font = Enum.Font.Code
textBox.PlaceholderText = "What is the secret word?"
textBox.BackgroundColor3 = colorNormal

local function onFocused()
	textBox.BackgroundColor3 = colorNormal
end

local function onFocusLost(enterPressed, inputObject)
	if enterPressed then
		local guess = textBox.Text
		if guess == secretWord then
			textBox.Text = "ACCESS GRANTED"
			textBox.BackgroundColor3 = colorCorrect
		else
			textBox.Text = "ACCESS DENIED"
			textBox.BackgroundColor3 = colorWrong
		end
	else
		-- The player stopped editing without pressing Enter
		textBox.Text = ""
		textBox.BackgroundColor3 = colorNormal
	end
end

textBox.FocusLost:Connect(onFocusLost)
textBox.Focused:Connect(onFocused)
		
				Copy Code
			
				Light Theme

Countdown Text

This code sample makes a TextLabel or TextButton count backwards from 10, setting the text color as it does so.

			
				Countdown Text

				Expected Output
			
				Expand
				
			-- Place this code in a LocalScript within a TextLabel/TextButton
local textLabel = script.Parent

-- Some colors we'll use with TextColor3
local colorNormal = Color3.new(0, 0, 0) -- black
local colorSoon = Color3.new(1, .5, .5) -- red
local colorDone = Color3.new(.5, 1, .5) -- green

-- Loop infinitely
while true do
	-- Count backwards from 10 to 1
	for i = 10, 1, -1 do
		-- Set the text
		textLabel.Text = "Time: " .. i
		-- Set the color based on how much time is left
		if i > 3 then
			textLabel.TextColor3 = colorNormal
		else
			textLabel.TextColor3 = colorSoon
		end
		wait(1)
	end
	textLabel.Text = "GO!"
	textLabel.TextColor3 = colorDone
	wait(2)
end
		
				Copy Code
			
				Light Theme

Game State Text

This code sample mirrors the contents of a StringValue into a TextLabel, updating and setting the color of the text as it changes.

			
				Game State Text

				Expected Output
			
				Expand
				
			-- Place a StringValue called "GameState" in the ReplicatedStorage
local vGameState = game.ReplicatedStorage:WaitForChild("GameState")
-- Place this code in a TextLabel
local textLabel = script.Parent

-- Some colors we'll use with TextColor3
local colorNormal = Color3.new(0, 0, 0) -- black
local colorCountdown = Color3.new(1, .5, 0) -- orange
local colorRound = Color3.new(.25, .25, 1) -- blue

-- We'll run this function to update the TextLabel as the state of the
-- game changes.
local function update()
	-- Update the text
	textLabel.Text = "State: " .. vGameState.Value
	-- Set the color of the text based on the current game state
	if vGameState.Value == "Countdown" then
		textLabel.TextColor3 = colorCountdown
	elseif vGameState.Value == "Round" then
		textLabel.TextColor3 = colorRound
	else
		textLabel.TextColor3 = colorNormal
	end
end

-- Pattern: update once when we start and also when vGameState changes
-- We should always see the most updated GameState.
update()
vGameState.Changed:Connect(update)
		
				Copy Code
			
				Light Theme