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 Qualitative Color Schemes. 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. The blueprint qualitative color schemes use a series of unrelated colors to make a scheme that does not imply order, merely a difference in kind.
Syntax:
<h1 style={{color: "#147EB3" | "#29A634" | "#D1980B" | "#D33D17"}}> ... </h1> <p style={{color: "#9D3F9D" | "#00A396" | "#DB2C6F" | "#8EB125" | "#946638" | "#7961DB"}}> ... </p>
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. appname, 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 Qualitative Color Schemes as the background color.
import React from "react" ;
import "@blueprintjs/core/lib/css/blueprint.css" ;
function App() {
return (
<div style={{ padding: 20, textAlign: "center" ,
color: "green" }}>
<h1>
ReactJS Blueprint Colors Qualitative Color Schemes
</h1>
<div style={{ display: 'flex' }}>
<div style={{ backgroundColor: '#147EB3' ,
padding: 20, color: 'white' }}>
#147EB3
</div>
<div style={{ backgroundColor: '#29A634' ,
padding: 20, color: 'white' }}>
#147EB3
</div>
<div style={{ backgroundColor: '#D1980B' ,
padding: 20, color: 'white' }}>
#D1980B
</div>
<div style={{ backgroundColor: '#D33D17' ,
padding: 20, color: 'white' }}>
#D33D17
</div>
<div style={{ backgroundColor: '#9D3F9D' ,
padding: 20, color: 'white' }}>
#9D3F9D
</div>
<div style={{ backgroundColor: '#00A396' ,
padding: 20, color: 'white' }}>
#00A396
</div>
<div style={{ backgroundColor: '#DB2C6F' ,
padding: 20, color: 'white' }}>
#DB2C6F
</div>
<div style={{ backgroundColor: '#8EB125' ,
padding: 20, color: 'white' }}>
#8EB125
</div>
<div style={{ backgroundColor: '#946638' ,
padding: 20, color: 'white' }}>
#946638
</div>
<div style={{ backgroundColor: '#7961DB' ,
padding: 20, color: 'white' }}>
#7961DB
</div>
</div>
</div>
);
} export default App;
|
Output:
Example 2: Below example demonstrates the usage of Qualitative Color Schemes as the text typography color.
import React from "react" ;
import "@blueprintjs/core/lib/css/blueprint.css" ;
function App() {
return (
<div style={{ padding: 20, textAlign: "center" ,
color: "green" }}>
<h1>
ReactJS Blueprint Colors Qualitative
Color Schemes
</h1>
<div>
<h1 style={{ color: '#147EB3' }}>#147EB3</h1>
<h2 style={{ color: '#29A634' }}>#147EB3</h2>
<h3 style={{ color: '#D1980B' }}>#D1980B</h3>
<h4 style={{ color: '#D33D17' }}>#D33D17</h4>
<h5 style={{ color: '#9D3F9D' }}>#9D3F9D</h5>
<h6 style={{ color: '#00A396' }}>#00A396</h6>
</div>
</div>
);
} export default App;
|
Output:
Reference: https://blueprintjs.com/docs/#core/colors.qualitative-color-schemes