Codelab Editor

Free Online HTML Editor

<!Doctype HTML>
<html>
<head>
	<title>Colors By HEX Value</title>
	<style>
	.color-group{
		background: #f4f4fb;
		display: flex;
		flex-wrap: wrap;
	}
	.single-color{
		border-radius: 4px;
		flex: 40%;
		display: block;
		text-align: center;
		padding-top: 20px;
		padding-bottom: 20px;
		margin: 2px;
		box-sizing: border-box;
	}
	</style>
</head>
<body>
	<h2>These are some of Colors By HEX Values</h2>
	<div class="color-group">
	<div class="single-color" style="background:#ff0000;">
	Red #ff0000
	</div>
	<div class="single-color" style="background:#00ff00;">
	Green #00ff00
	</div>
	<div class="single-color" style="background:#0000ff;">
	Blue #0000ff
	</div>
	<div class="single-color" style="background:#ffffff;">
	White #ffffff
	</div>
	<div class="single-color" style="background:#000000; color: white;">
	Black #000000
	</div>
	<div class="single-color" style="background:#909090; color: white;">
	#909090
	</div>
	<div class="single-color" style="background:#3f3f3f;">
	#3f3f3f
	</div>
	<div class="single-color" style="background:#979797;">
	#979797
	</div>
	<div class="single-color" style="background:#a4a4a4;">
	#a4a4a4
	</div>
	<div class="single-color" style="background:#4a4a4a; color: white;">
	#4a4a4a
	</div>
	</div>
</body>
</html>

Editor Commands

Ctrl

Find

Ctrl

Find Next

Ctrl

⇧

Find Previous

Ctrl

⇧

Find & Replace

Ctrl

]

Indent Code Right

Ctrl

[

Indent Code Left

⇧

Tab

Auto Indent Code

Ctrl

Line Comment

Ctrl

Alt

Block Comment

TutsInsider Actions

Alt

Run Code

Ctrl

Copy Editor Code

Ctrl

Select All Editor Code

Ctrl

Save/Download

Ctrl

Alt

Rotate

Ctrl

Alt

Switch Theme

Ctrl

⇧

Open Console

Esc

Close Console