室内装修配色汇总
0 314

【什么颜色搭配在一起最好看,装修可借鉴】

  1. 红色配白色、黑色、蓝灰色、米色、灰色。
  2. 咖啡色配米色、鹅黄、砖红、蓝绿色、黑色。
  3. 黄色配紫色、蓝色、白色、咖啡色、黑色。
  4. 绿色配白色、米色、黑色、暗紫色、灰褐色、灰棕色。
  5. 蓝色配白色、粉蓝色、酱红色、金色、银色、橄榄绿、橙色、黄色。

一、室内装修选色配色十大原则

  1.  空间配色不超过三种,其中白色、黑色不算色。
  2. 金色、银色可与任何颜色相配。金色不包括黄色,银色不包括灰白色。
  3.  家用配色在没有设计师指导下最佳配色灰度是:墙浅,地中,家私深。
  4.  厨房不要使用暖色调,黄色色系除外
  5. 打死也不要深绿色的地砖。
  6.  即使没有人威胁打死你,你也坚决不要把不同材质但色系相同的材料放在一起。否则,你会有一半的机会犯错!
  7. 想制造明快现代的家居品味,那么就不要选用那些印有大花小花的东西(植物除外),尽量使用素色的设计。
  8.  天花板的颜色必须浅于或与墙面同色。当墙面的颜色为深色设计时,天花板必须采用浅色。天花板的色系只能是白色或与墙面同色系。
  9. 空间非封闭惯穿的,必须使用同一配色方案。不同的封闭空间,可以使用不同的配色方案。
  10. 本"定律"如果用于家居以外,90%可能错误!

二、空间配色不超过三种是什么意思?

  1.  同一个封闭空间内的三种颜色,包括天花、墙面、地面和家私。客厅和主人房可以有各成系统的的不同配色,但如果客厅和餐厅是连在一起的,视为同一空间。
  2. 白色、黑色、灰色、金色、银色不计算在三种颜色的限制之内。但金色和银色一般不能同时存在,只能在同一空间使用金或银的一种。
  3.  图案类以其呈现色为准。例如一块花布有多种颜色,由于色彩有多种关系,所以专业上以主要呈现色为准。办法是眯着眼睛看,即可看出其主要色调。但如果一个大型的图案的个别色块很大的话,同样得视为一种色。

三、各种空间选色配色忌宜

餐厅:

不要用蓝色

蓝色具有调节神经、镇静安神的作用。但蓝色的餐桌或餐垫上的食物,总是不如暖色环境看着有食欲;同时不要在餐厅内装白炽灯或蓝色的情调灯,科学实验证明,蓝色灯光会让食物看起来不诱人。但是,蓝色作为卫浴间的装饰,却能强化神秘感与隐私感,值得一试。

客厅:

切勿大面积使用紫色

紫色,给人的感觉似乎是沉静的、脆弱纤细的。但大面积的紫色会使空间整体色调变深,从而产生压抑感。建议不要放在需要欢快气氛的客厅内或孩子的房间中,那样会使得身在其中的人有一种忧郁的感觉。

卧室:

最好不用橙色

橙色,是生气勃勃、充满活力的颜色。然而将它用在卧室则不容易使人安静下来,不利于睡眠。但是,如果将橙色用在客厅,则会营造欢快的气氛。同时,橙色有诱发食欲的作用,所以也是装点餐厅的理想色彩。将橙色和巧克力色或米黄色搭配在一起也很舒畅。

书房:

不要用黄色

黄色,可爱而成熟,文雅而自然。水果黄带着温柔的特性;牛油黄散发着原动力;金黄色带来温暖。黄色还对健康者具有稳定情绪、增进食欲的作用。但是长时间接触高纯度黄色,会让人有一种慵懒的感觉。所以黄色最不适宜用在书房,它会减慢思考的速度。建议在客室与餐厅适量点缀一些黄色的装饰就可以了。

儿童房:

咖啡色不是理想色彩

咖啡色属于中性暖色色调,它优雅、朴素,庄重而不失雅致。然而,咖啡色本身是一种比较含蓄的颜色,它会使室内沉闷而忧郁,影响进餐质量;也不宜用在儿童房间内,暗沉的颜色会使孩子性格忧郁;还要切记,咖啡色不适宜搭配黑色。

厨房:

宜选用白色等淡色系

能够表现出干净的色相主要有灰度较小、明度较高的色彩,如白、乳白、淡黄等,而能够刺激食欲的色彩主要是与好吃食品较接近、或在日常生活中能够强烈刺激食欲的色彩,如橙红、橙黄、棕褐等。

卫生间:

不宜大面积使用过于鲜艳夺目的色彩

卫生间通常都不是很大,而各种盥洗用具复杂、色彩多样,因此,为避免视觉的疲劳和空间的拥挤感,应选择清洁而明快的色彩为主要背景色,对缺乏透明度与纯净感的色彩要敬而远之。色彩的空间分布应该是下部重、上部轻,以增加空间的纵深感和稳定感。

0 314
() 全部评论
所有回复 (0)

热门

最新

  • Web3D编程 1 0 1 发布

    点击查看例子

    代码效果


    源码

    <!DOCTYPE html> <html> <head> <title>材质和光源</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js"></script> <script type="text/javascript" src="../libs/dat.gui.js"></script> <style> body { /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overflow: hidden; } </style> </head> <body> <!-- Div which will hold the Output --> <div id="LapBin-output"> </div> <!-- Javascript code that runs our Three.js examples --> <script type="text/javascript"> // 加载所有内容后,我们将运行Three.js function init() { // 创建一个场景,该场景将包含所有元素,例如对象、摄影机和灯光。 var scene = new THREE.Scene(); // 创建一个摄像头,它定义了我们要看的范围。 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.2, 1000); // 创建渲染并设置大小 var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true; // 创建平面 var planeGeometry = new THREE.PlaneGeometry(60, 30); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; // 旋转并定位平面 plane.rotation.x = -0.5 * Math.PI; plane.position.x = 10; plane.position.y = 0; plane.position.z = -10; // 将平面添加到场景中 scene.add(plane); // 创建一个立方体 var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; // 定位立方体 cube.position.x = -4; cube.position.y = 3; cube.position.z = -10; // 将立方体添加到场景中 scene.add(cube); // 创建一个球体 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xdd77ff}); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 定位球体 sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = -10; sphere.castShadow = true; // 将球体添加到场景中 scene.add(sphere); // 将摄影机定位并指向场景的中心 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // 为阴影添加聚光灯 var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; scene.add(spotLight); // 将渲染器的输出添加到html元素 document.getElementById("LapBin-output").appendChild(renderer.domElement); // 渲染场景 renderer.render(scene, camera); } window.onload = init; </script> </body> </html>
  • LapBin(ThreeJS) 2 0 1 发布
  • 点击查看例子

    代码效果




    天空盒使用源码

    <!DOCTYPE html> <html lang="en">     <head>         <title>three.js - skybox</title>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">         <link type="text/css" rel="stylesheet" href="main.css">     </head>     <body>         <div id="container"></div>         <script type="module">             import * as THREE from '../build/three.module.js';             import { OrbitControls } from './jsm/controls/OrbitControls.js';             var scene, camera , renderer;             init();             animate();             function init() {                 // scene                 scene = new THREE.Scene();                 // camera                 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );                 camera.position.set( - 15, 7, 15 );                 camera.lookAt( scene.position );                              // skybox                 var cubeTextureLoader = new THREE.CubeTextureLoader();                 cubeTextureLoader.setPath( 'textures/cube/Park2/' ); //天空盒图片文件路径                 var cubeTexture = new THREE.CubeTextureLoader.load( [                     "posx.jpg", "negx.jpg", //图片 http://www.cglap.com/assets/lapbin/textures/cube/Park2/negx.jpg                     "posy.jpg", "negy.jpg", // http://www.cglap.com/assets/lapbin/textures/cube/Park2/negy.jpg                     "posz.jpg", "negz.jpg" //http://www.cglap.com/assets/lapbin/textures/cube/Park2/negz.jpg                 ] );                 scene.background = cubeTexture;                 // light                 var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );                 scene.add( ambientLight );                 var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );                 directionalLight.position.set( - 1, 1, 1 );                 scene.add( directionalLight );                 // renderer                 renderer = new THREE.WebGLRenderer( { antialias: true } );                 renderer.setSize( window.innerWidth, window.innerHeight );                 renderer.setPixelRatio( window.devicePixelRatio );                 document.body.appendChild( renderer.domElement );                 // 鼠标控制旋转                 var controls = new OrbitControls( camera, renderer.domElement );                 controls.minDistance = 5;                 controls.maxDistance = 50;                              //                 window.addEventListener( 'resize', onResize, false );             }             function onResize() {                 camera.aspect = window.innerWidth / window.innerHeight;                 camera.updateProjectionMatrix();                 renderer.setSize( window.innerWidth, window.innerHeight );             }             function animate() {                 requestAnimationFrame( animate );                 render();             }             function render() {                 renderer.render( scene, camera );             }         </script> </body> </html>
  • 例子查看链接gui

    为了能够快速地搭建three.js的交互ui,官方提供了一个GUI组件,通过简单的语法学习就能够使用。

    下面我们就来学习如何使用

    用法一

    首先声明一个对象,这个对象设置获取一个交互.

       var params = {                 color: '#ffffff',                 scale: 4,                 flowX: 1,                 flowY: 1 , states:"Walking"             };

    然后就就可以使用GUI来进行生成交互UI组件

    生成一个panel组件版,然后将组件的对象添加到这个组件版,完成之后就能够生成一个交互界面了。

     // dat.gui

    颜色选择器                var gui = new GUI();                 gui.addColor( params, 'color' ).onChange( function ( value ) {                    // do something                 } );


    拉动条
    不仅可以生成按钮,也可以生成拉动条。 gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) { // do something  } );


    gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                   // do something } );


     gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                   // do something                 } );


    下拉表
     //选项 var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];  // 添加  gui.add( params, 'states' ).options( states ).onChange( function ( value ) {              // do something } );
    效果图


    全部代码

    <!DOCTYPE html> <html lang="en">     <head>         <title>three.js - gui</title>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">         <link type="text/css" rel="stylesheet" href="main.css">     </head>     <body>         <div id="container"></div>         <script type="module">             import * as THREE from '../build/three.module.js';             import { GUI } from './jsm/libs/dat.gui.module.js';             var scene, camera, renderer;             var params = {                 color: '#ffffff',                 scale: 4,                 flowX: 1,                 flowY: 1,                 states:"Walking"             };             init();             animate();             function init() {                 // scene                 scene = new THREE.Scene();                 // camera                 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );                 camera.position.set( - 15, 7, 15 );                 camera.lookAt( scene.position );                 // renderer                 renderer = new THREE.WebGLRenderer( { antialias: true } );                 renderer.setSize( window.innerWidth, window.innerHeight );                 renderer.setPixelRatio( window.devicePixelRatio );                 document.body.appendChild( renderer.domElement );                 // dat.gui                 var gui = new GUI();                 gui.addColor( params, 'color' ).onChange( function ( value ) {                     //do something                 } );                 gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) {                     //do something                 } );                 gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                     //do something                 } );                 gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                     //do something                 } );                 //选项                 var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];                  gui.add( params, 'states' ).options( states ).onChange( function ( value ) { //do something                 } );;                              gui.open();                 window.addEventListener( 'resize', onResize, false );             }             function onResize() {                 camera.aspect = window.innerWidth / window.innerHeight;                 camera.updateProjectionMatrix();                 renderer.setSize( window.innerWidth, window.innerHeight );             }             function animate() {                 requestAnimationFrame( animate );                 render();             }             function render() {                 renderer.render( scene, camera );             }         </script> </body> </html>
  • LapBin(ThreeJS) 8 0 1 发布