Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss React.js Blueprint Colors. Colors are a very important component used in styling a web application. The React.js Blueprint provides different types of color schemes that can be used while styling a web application.
Blueprint Colors Usage:
- Blueprint in Sass: Blueprint colors are used in Sass scripting language which is a preprocessor style sheet language compiled into CSS.
- Blueprint in Less: Blueprint colors are used in Less which is a dynamic preprocessor style sheet language compiled into CSS.
- Blueprint in JavaScript: Blueprint colors are used in JavaScript as Blueprint is React based library which uses JavaScript.
1. Gray scale: Grayscale colors are different shades of gray color available to design web pages. This is discussed in this article.
2. Core colors: The core colors are used in user interface design and each color is linked to what we call a visual intent. This is discussed in this article.
3. Extended colors: We use extended colors when we need to represent some kind of data. So basically it is reserved for data visualization.
Syntax:
<div style={{ backgroundColor: "#96290D" }}>...</div> <h1 style={{ color: "#DB2C6F" }}>...</h1>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. app name, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure:
Example 1: Below example demonstrates the usage of Extended color as the background color.
import React from "react" ;
import "@blueprintjs/core/lib/css/blueprint.css" ;
function App() {
return (
<>
<div>
<h1>
ReactJS BluePrint Colors Extended colors
</h1>
</div>
<div style={{
display: "flex" ,
flexDirection: "row"
}}>
<div style={{ color: "black" , padding: 20 }}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#96290D" ,
color: "white" ,
}}
>
Vermilion -1
</div>
<div
style={{
padding: 10,
backgroundColor: "#B83211" ,
color: "white" ,
}}
>
Vermilion -2
</div>
<div style={{
padding: 10,
backgroundColor: "#D33D17"
}}>
Vermilion -3
</div>
<div style={{
padding: 10,
backgroundColor: "#EB6847"
}}>
Vermilion -4
</div>
<div style={{
padding: 10,
backgroundColor: "#FF9980"
}}>
Vermilion -5
</div>
</div>
</div>
<div style={{
color: "black" ,
textAlign: "left" , padding: 20
}}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#A82255" ,
color: "white" ,
}}
>
Rose -1
</div>
<div
style={{
padding: 10,
backgroundColor: "#C22762" ,
color: "white" ,
}}
>
Rose -2
</div>
<div style={{
padding: 10,
backgroundColor: "#DB2C6F"
}}>Rose -3</div>
<div style={{
padding: 10,
backgroundColor: "#F5498B"
}}>Rose -4</div>
<div style={{
padding: 10,
backgroundColor: "#FF66A1"
}}>Rose -5</div>
</div>
</div>
<div style={{
color: "black" ,
textAlign: "left" , padding: 20
}}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#5C255C" ,
color: "white" ,
}}
>
Voilet-1
</div>
<div
style={{
padding: 10,
backgroundColor: "#7C327C" ,
color: "white" ,
}}
>
Voilet-2
</div>
<div style={{
padding: 10,
backgroundColor: "#9D3F9D"
}}>
Voilet-3
</div>
<div style={{
padding: 10,
backgroundColor: "#BD6BBD"
}}>
Voilet-4
</div>
<div style={{
padding: 10,
backgroundColor: "#D69FD6"
}}>
Voilet-5
</div>
</div>
</div>
<div style={{
color: "black" ,
textAlign: "left" ,
padding: 20
}}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#5642A6" ,
color: "white" ,
}}
>
Indigo-1
</div>
<div
style={{
padding: 10,
backgroundColor: "#634DBF" ,
color: "white" ,
}}
>
Indigo-2
</div>
<div style={{
padding: 10,
backgroundColor: "#7961DB"
}}>
Indigo-3
</div>
<div style={{
padding: 10,
backgroundColor: "#9881F3"
}}>
Indigo-4
</div>
<div style={{
padding: 10,
backgroundColor: "#BDADFF"
}}>
Indigo-5
</div>
</div>
</div>
</div>
</>
);
} export default App;
|
Step to run the application: Open the terminal and type the following command.
npm start
Output:
Example 2: Below example demonstrates the usage of Extended color as the text typography color.
import React from "react" ;
import "@blueprintjs/core/lib/css/blueprint.css" ;
function App() {
return (
<>
<div style={{
padding: 20,
color: "green"
}}>
<h1>ReactJS BluePrint Colors Extended Colors</h1>
</div>
<div>
<div style={{
padding: 20, display: "flex" ,
flexDirection: "row"
}}>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#0C5174" }}>
Cerulean color 1
</h1>
<h2 style={{ color: "#0F6894" }}>
Cerulean color 2
</h2>
<h3 style={{ color: "#147EB3" }}>
Cerulean color 3
</h3>
<h4 style={{ color: "#3FA6DA" }}>
Cerulean color 4
</h4>
<h5 style={{ color: "#68C1EE" }}>
Cerulean color 5
</h5>
</div>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#004D46" }}>
Turquoise color 1
</h1>
<h2 style={{ color: "#007067" }}>
Turquoise color 2
</h2>
<h3 style={{ color: "#00A396" }}>
Turquoise color 3
</h3>
<h4 style={{ color: "#13C9BA" }}>
Turquoise color 4
</h4>
<h5 style={{ color: "#7AE1D8" }}>
Turquoise color 5
</h5>
</div>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#1D7324" }}>
Forest Color 1
</h1>
<h2 style={{ color: "#238C2C" }}>
Forest Color 2
</h2>
<h3 style={{ color: "#29A634" }}>
Forest Color 3
</h3>
<h4 style={{ color: "#43BF4D" }}>
Forest Color 4
</h4>
<h5 style={{ color: "#62D96B" }}>
Forest Color 5
</h5>
</div>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#43501B" }}>
Lime Color 1
</h1>
<h2 style={{ color: "#5A701A" }}>
Lime Color 2
</h2>
<h3 style={{ color: "#8EB125" }}>
Lime Color 3
</h3>
<h4 style={{ color: "#B6D94C" }}>
Lime Color 4
</h4>
<h5 style={{ color: "#D4F17E" }}>
Lime Color 5
</h5>
</div>
</div>
</div>
</>
);
} export default App;
|
Output:
Reference: https://blueprintjs.com/docs/#core/colors